/*
 * Orvanthe: the four inner pages. Each opens differently: the pipeline with an index of codes,
 * science with its figures on a ruled strip, partners with a drawn specimen term sheet, careers with a
 * portrait beside the words. Values from tokens.css only.
 */

/* ── shared page head ─────────────────────────────────────────── */
.ov-phead { padding-top: var(--s-space-8); border-bottom: var(--s-hairline) solid var(--s-rule); }
.ov-phead__grid {
    display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    gap: var(--s-space-5) var(--s-space-8); align-items: end;
    padding-bottom: var(--s-space-7);
}
.ov-crumb {
    grid-column: 1 / -1;
    display: flex; gap: var(--s-space-3); align-items: baseline;
    padding-bottom: var(--s-space-3); border-bottom: var(--s-rule-w) solid var(--s-ink);
    font-family: var(--s-font-mono); font-size: var(--s-size-mono);
    letter-spacing: var(--s-track-label); text-transform: uppercase;
}
.ov-crumb span { color: var(--s-accent); font-weight: var(--s-weight-semi); }
.ov-phead__title {
    font-size: var(--s-size-display); line-height: var(--s-leading-display);
    letter-spacing: var(--s-track-display); font-weight: var(--s-weight-semi);
    text-wrap: balance;
}
.ov-phead__lede { color: var(--s-graphite); font-size: var(--s-size-lede); line-height: var(--s-leading-snug); max-width: var(--s-measure-narrow); }
.ov-phead__aside { display: grid; gap: var(--s-space-5); justify-items: start; }
.ov-section--tight { padding-block: var(--s-space-7) var(--s-section-s); }

.ov-figures {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto auto;
    grid-auto-flow: column; border-top: var(--s-hairline) solid var(--s-rule); padding-top: var(--s-space-4);
}
.ov-figures div { display: grid; grid-template-rows: subgrid; grid-row: span 2; }
.ov-figures dd { grid-row: 1; font-size: var(--s-size-figure); font-weight: var(--s-weight-semi); line-height: var(--s-leading-solid); letter-spacing: var(--s-track-h2); }
.ov-figures dt { grid-row: 2; margin-top: var(--s-space-2); font-family: var(--s-font-mono); font-size: var(--s-size-mono-s); color: var(--s-graphite); }

/* pipeline: the index of codes */
.ov-phead--pipeline .ov-phead__grid { align-items: start; }
.ov-phead--pipeline .ov-phead__title { grid-column: 1; grid-row: 2; }
.ov-phead--pipeline .ov-phead__lede { grid-column: 1; grid-row: 3; }
.ov-phead--pipeline .ov-figures { grid-column: 1; grid-row: 4; margin-top: var(--s-space-3); }
.ov-index { grid-column: 2; grid-row: 2 / span 3; align-self: end; display: grid; gap: var(--s-space-3); }
.ov-index ol { border-top: var(--s-rule-w) solid var(--s-ink); }
.ov-index a {
    display: grid; grid-template-columns: 9ch minmax(0, 1fr) minmax(0, 0.8fr) 10ch;
    gap: var(--s-space-4); align-items: center;
    min-height: var(--s-touch); padding: var(--s-space-2) var(--s-space-2);
    border-bottom: var(--s-hairline) solid var(--s-rule);
    text-decoration: none; font-size: var(--s-size-small);
    transition: background-color var(--s-dur-fast) var(--s-ease);
}
.ov-index a:hover { background: var(--s-tint-soft); }
.ov-index__area { color: var(--s-graphite); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ov-index__phase { font-family: var(--s-font-mono); font-size: var(--s-size-mono-s); text-align: right; color: var(--s-graphite); }

/* pipeline: one spec sheet per programme */
.ov-prog { padding-block: var(--s-section-s); border-top: var(--s-rule-w) solid var(--s-ink); background: var(--s-bg); }
.ov-prog:nth-child(even) { background: var(--s-paper); }
.ov-prog__grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.6fr) minmax(0, 1fr); gap: var(--s-space-7); align-items: start; }
.ov-prog__id { position: sticky; top: calc(var(--s-nav-h) + var(--s-ribbon-h) + var(--s-space-5)); display: grid; gap: var(--s-space-2); }
.ov-prog__count { font-family: var(--s-font-mono); font-size: var(--s-size-mono-s); color: var(--s-accent); letter-spacing: var(--s-track-label); }
.ov-prog__code { font-size: var(--s-size-code); line-height: var(--s-leading-solid); letter-spacing: var(--s-track-h2); }
.ov-prog__area { font-weight: var(--s-weight-semi); }
.ov-prog__target { color: var(--s-graphite); font-size: var(--s-size-small); }
.ov-prog__main { display: grid; gap: var(--s-space-4); }
.ov-prog__track { margin-bottom: var(--s-space-4); }
.ov-prog__phases { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s-space-1); margin-top: var(--s-space-2); font-family: var(--s-font-mono); font-size: var(--s-size-mono-s); color: var(--s-faint); }
.ov-prog__phases .is-done { color: var(--s-graphite); }
.ov-prog__phases .is-now { color: var(--s-accent); font-weight: var(--s-weight-semi); }
.ov-prog__q { font-size: var(--s-size-h2); line-height: var(--s-leading-tight); letter-spacing: var(--s-track-h2); font-weight: var(--s-weight-semi); text-wrap: balance; }
.ov-prog__body { color: var(--s-graphite); max-width: var(--s-measure); font-size: var(--s-size-lede); line-height: var(--s-leading-body); }
.ov-prog__side { display: grid; gap: var(--s-space-4); }
.ov-spec { border-top: var(--s-rule-w) solid var(--s-ink); }
.ov-spec div { display: grid; grid-template-columns: 9ch minmax(0, 1fr); gap: var(--s-space-3); padding-block: var(--s-space-3); border-bottom: var(--s-hairline) solid var(--s-rule); font-size: var(--s-size-small); }
.ov-spec dt { font-family: var(--s-font-mono); font-size: var(--s-size-mono-s); color: var(--s-graphite); text-transform: uppercase; letter-spacing: var(--s-track-label); padding-top: var(--s-space-1); }
.ov-prog__next { padding: var(--s-space-4); background: var(--s-tint-soft); border-left: var(--s-rule-w) solid var(--s-accent); }
.ov-prog__next .ov-label { margin-bottom: var(--s-space-2); }
.ov-prog__back { display: inline-flex; align-items: center; min-height: var(--s-touch); font-family: var(--s-font-mono); font-size: var(--s-size-mono); color: var(--s-graphite); }
.ov-progs__concept { padding-block: var(--s-space-7); font-family: var(--s-font-mono); font-size: var(--s-size-mono); color: var(--s-graphite); border-top: var(--s-rule-w) solid var(--s-ink); }
.ov-progs__concept span { color: var(--s-ink); font-weight: var(--s-weight-semi); }

/* ── the wide photographic band (science, partners) ───────────── */
.ov-band { position: relative; height: clamp(280px, 46svh, 560px); overflow: hidden; background: var(--s-dark); }
.ov-band picture, .ov-band__img { width: 100%; height: 100%; }
.ov-band__img { object-fit: cover; object-position: 50% 55%; animation: ov-settle var(--s-dur-hero-in) var(--s-ease) both; }
@keyframes ov-settle { from { transform: scale(var(--s-hero-zoom)); } }
.ov-band__figs {
    position: absolute; left: var(--s-gutter); right: var(--s-gutter); bottom: 0;
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
    background: var(--s-paper);
    clip-path: polygon(0 0, calc(100% - var(--s-chamfer)) 0, 100% var(--s-chamfer), 100% 100%, 0 100%);
    border-top: var(--s-rule-w) solid var(--s-ink);
}
.ov-band__figs div { display: flex; flex-direction: column-reverse; justify-content: flex-end; padding: var(--s-space-4) var(--s-space-5); border-right: var(--s-hairline) solid var(--s-rule); }
.ov-band__figs dd { font-size: var(--s-size-figure-s); font-weight: var(--s-weight-semi); line-height: var(--s-leading-solid); letter-spacing: var(--s-track-h2); }
.ov-band__figs dt { margin-top: var(--s-space-2); font-family: var(--s-font-mono); font-size: var(--s-size-mono-s); color: var(--s-graphite); }
/* science: no photograph (home's frames are not repeated); the figures sit on a ruled strip */
.ov-band.ov-band--plain { height: auto; overflow: visible; background: none; padding-top: var(--s-space-6); }
.ov-band--plain .ov-band__figs { position: static; border: var(--s-hairline) solid var(--s-rule-strong); border-top: var(--s-rule-w) solid var(--s-ink); clip-path: none; }
.ov-band--plain .ov-band__figs div:last-child { border-right: 0; }
/* ── partners: the offer beside a drawn specimen term sheet ───── */
.ov-deal {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: var(--s-space-5) var(--s-space-8); align-items: center;
    padding-bottom: var(--s-space-7);
}
.ov-deal__text { display: flex; flex-direction: column; gap: var(--s-space-5); align-items: flex-start; }
.ov-deal__desks { align-self: stretch; margin-top: var(--s-space-3); border-top: var(--s-rule-w) solid var(--s-ink); }
.ov-deal__desks a {
    display: flex; align-items: center; gap: var(--s-space-4);
    min-height: var(--s-touch); padding: var(--s-space-2) var(--s-space-2);
    border-bottom: var(--s-hairline) solid var(--s-rule);
    text-decoration: none; font-weight: var(--s-weight-semi);
    transition: background-color var(--s-dur-fast) var(--s-ease), padding var(--s-dur) var(--s-ease);
}
.ov-deal__desks a:hover { background: var(--s-tint-soft); padding-left: var(--s-space-4); }
.ov-deal__desks span { font-family: var(--s-font-mono); font-size: var(--s-size-mono-s); color: var(--s-accent); }

.ov-sheet { position: relative; margin: 0; padding: var(--s-space-5) var(--s-space-5) var(--s-space-6) 0; }
/* the stacked sheets and the lifted stamp must never widen the page (phone was 420px at load) */
.ov-phead--partners { overflow-x: clip; }
/* two sheets under the top one: a draft on a desk, not a card */
.ov-sheet::before, .ov-sheet::after {
    content: ""; position: absolute; inset: var(--s-space-5) var(--s-space-5) var(--s-space-6) 0;
    background: var(--s-paper); border: var(--s-hairline) solid var(--s-rule-strong);
}
.ov-sheet::before { transform: translate(var(--s-space-4), var(--s-space-4)) rotate(1.6deg); background: var(--s-tint-soft); }
.ov-sheet::after { transform: translate(var(--s-space-2), var(--s-space-2)) rotate(0.6deg); }
.ov-sheet__paper {
    position: relative; z-index: 1;
    display: grid; gap: var(--s-space-4);
    padding: var(--s-space-6) var(--s-space-6) var(--s-space-5);
    background: var(--s-paper); border: var(--s-hairline) solid var(--s-rule-strong);
    border-top: var(--s-space-2) solid var(--s-accent);
    box-shadow: 0 var(--s-space-5) var(--s-space-8) var(--s-shadow);
    transform: rotate(-0.8deg);
}
.ov-sheet__top {
    display: flex; justify-content: space-between; gap: var(--s-space-3);
    font-family: var(--s-font-mono); font-size: var(--s-size-mono-s); letter-spacing: var(--s-track-label);
    text-transform: uppercase; color: var(--s-graphite);
}
.ov-sheet__top span:first-child { color: var(--s-accent); font-weight: var(--s-weight-semi); }
.ov-sheet__title { font-size: var(--s-size-h3); line-height: var(--s-leading-tight); font-weight: var(--s-weight-semi); letter-spacing: var(--s-track-h2); }
.ov-sheet__terms { border-top: var(--s-rule-w) solid var(--s-ink); }
.ov-sheet__terms div {
    position: relative; display: grid; grid-template-columns: 13ch minmax(0, 1fr); gap: var(--s-space-4);
    padding-block: var(--s-space-2);
}
/* each clause's rule is drawn in, one after the other */
.ov-sheet__terms div::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: var(--s-hairline);
    background: var(--s-rule-strong); transform-origin: left;
    transition: transform var(--s-dur-bar) var(--s-ease) calc(var(--i) * var(--s-stagger-sheet));
}
.ov-sheet__terms dt { font-family: var(--s-font-mono); font-size: var(--s-size-mono-s); text-transform: uppercase; letter-spacing: var(--s-track-label); color: var(--s-graphite); padding-top: var(--s-space-1); }
.ov-sheet__terms dt span { display: inline-block; width: 3ch; color: var(--s-accent); font-weight: var(--s-weight-semi); }
.ov-sheet__terms dd { font-size: var(--s-size-small); line-height: var(--s-leading-snug); }
.ov-sheet__glabel { font-family: var(--s-font-mono); font-size: var(--s-size-mono-s); color: var(--s-graphite); letter-spacing: var(--s-track-mono); }
.ov-sheet__gates ol {
    position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-top: var(--s-space-3); padding-top: var(--s-space-4);
    font-family: var(--s-font-mono); font-size: var(--s-size-mono-s);
}
.ov-sheet__gates ol::before {
    content: ""; position: absolute; left: var(--s-space-1); right: 0; top: calc(var(--s-space-1) + 1px); height: var(--s-rule-w);
    background: var(--s-accent); transform-origin: left; transition: transform var(--s-dur-slow) var(--s-ease) var(--s-dur);
}
.ov-sheet__gates li { position: relative; padding-top: var(--s-space-2); }
.ov-sheet__pin {
    position: absolute; left: 0; top: calc(var(--s-space-4) * -1); width: var(--s-space-3); height: var(--s-space-3);
    background: var(--s-accent); border: var(--s-rule-w) solid var(--s-accent);
    transition: background-color var(--s-dur) var(--s-ease) calc(var(--s-dur) + var(--i) * var(--s-stagger-sheet));
}
.ov-sheet__sign { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-space-6); margin-top: var(--s-space-4); }
.ov-sheet__sign p { display: grid; gap: var(--s-space-2); font-family: var(--s-font-mono); font-size: var(--s-size-mono-s); color: var(--s-graphite); }
.ov-sheet__line { display: block; height: var(--s-hairline); background: var(--s-ink); }
.ov-sheet__stamp {
    /* pressed across the foot of the sheet, under the partner's signature, where a draft stamp goes */
    justify-self: end; margin-top: calc(var(--s-space-3) * -1);
    padding: var(--s-space-2) var(--s-space-3);
    border: var(--s-rule-w) solid var(--s-accent); outline: var(--s-hairline) solid var(--s-accent); outline-offset: 3px;
    font-family: var(--s-font-mono); font-size: var(--s-size-mono-s); font-weight: var(--s-weight-semi);
    letter-spacing: var(--s-track-label); text-transform: uppercase; color: var(--s-accent);
    background: var(--s-paper-veil);
    transform: rotate(-7deg);
    transition: transform var(--s-dur) var(--s-ease-settle) var(--s-dur-stamp), opacity var(--s-dur-fast) linear var(--s-dur-stamp);
}
/* before it enters: clause rules and the gate line undrawn, the stamp lifted off the page */
.ov-js .ov-sheet:not(.is-in) .ov-sheet__terms div::after,
.ov-js .ov-sheet:not(.is-in) .ov-sheet__gates ol::before { transform: scaleX(0); }
.ov-js .ov-sheet:not(.is-in) .ov-sheet__pin { background: var(--s-paper); }
.ov-js .ov-sheet:not(.is-in) .ov-sheet__stamp { opacity: 0; transform: rotate(-7deg) scale(1.6); }

/* ── science: six gates ───────────────────────────────────────── */
/* science runs as one argument: the pinned plate hands straight to the gates, and the gates, tests and
   rules follow each other without a screen of white between (review round 2, LESSONS 3) */
.ov-section.ov-gates { padding-block: var(--s-space-6) var(--s-space-8); }
.ov-section.ov-tests { padding-block: var(--s-space-8); }
.ov-section.ov-rules { padding-block: var(--s-space-8) var(--s-section); }
.ov-gates .ov-h2 { margin-top: var(--s-space-3); max-width: var(--s-measure-narrow); }
.ov-gates__path { position: relative; margin-top: var(--s-space-7); }
.ov-gates__line { position: absolute; left: 0; right: 0; top: var(--s-space-5); width: 100%; height: var(--s-rule-w); overflow: visible; }
.ov-gates__line line { stroke: var(--s-accent); stroke-width: 2; stroke-dasharray: 1; stroke-dashoffset: 0; vector-effect: non-scaling-stroke; transition: stroke-dashoffset var(--s-dur-fill-auto) var(--s-ease); }
.ov-js .ov-gates__path:not(.is-in) .ov-gates__line line { stroke-dashoffset: 1; }
.ov-gates__list { position: relative; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--s-space-5); }
.ov-gate { display: grid; gap: var(--s-space-2); align-content: start; }
.ov-gate__n {
    display: grid; place-items: center; width: var(--s-space-8); height: var(--s-space-7);
    background: var(--s-paper); border: var(--s-hairline) solid var(--s-ink);
    font-family: var(--s-font-mono); font-weight: var(--s-weight-semi); font-size: var(--s-size-mono);
    clip-path: polygon(0 0, calc(100% - var(--s-chamfer-s)) 0, 100% var(--s-chamfer-s), 100% 100%, 0 100%);
    transition: background-color var(--s-dur) var(--s-ease), color var(--s-dur) var(--s-ease);
    transition-delay: calc(var(--i) * var(--s-stagger) * 4);
}
.ov-gates__path.is-in .ov-gate__n { background: var(--s-accent); color: var(--s-accent-ink); border-color: var(--s-accent); }
.ov-gate__name { font-size: var(--s-size-h3); margin-top: var(--s-space-3); }
.ov-gate p { color: var(--s-graphite); font-size: var(--s-size-small); line-height: var(--s-leading-snug); }

/* ── science: the three tests ─────────────────────────────────── */
.ov-tests { background: var(--s-paper); border-top: var(--s-hairline) solid var(--s-rule); }
.ov-tests__head { display: grid; gap: var(--s-space-3); margin-bottom: var(--s-space-7); }
.ov-tests__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-space-6); }
.ov-test { margin: 0; display: grid; gap: var(--s-space-4); align-content: start; }
.ov-test__svg { width: 100%; height: auto; background: var(--s-bg); border: var(--s-hairline) solid var(--s-rule); padding: var(--s-space-3); overflow: visible; }
.ov-test__axis { stroke: var(--s-ink); stroke-width: 1.5; }
.ov-test__grid { stroke: var(--s-rule); stroke-width: 1; }
.ov-test__band { fill: var(--s-tint-soft); }
.ov-test__half { stroke: var(--s-rule-strong); stroke-dasharray: 3 4; }
.ov-test__a, .ov-test__b { fill: none; stroke-width: 3; stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset var(--s-dur-fill-auto) var(--s-ease); }
.ov-test__a { stroke: var(--s-accent); }
.ov-test__b { stroke: var(--s-graphite); stroke-dasharray: 1; }
.ov-js .ov-test:not(.is-in) .ov-test__a, .ov-js .ov-test:not(.is-in) .ov-test__b { stroke-dashoffset: 1; }
.ov-test__gap { stroke: var(--s-ink); stroke-width: 1.5; }
.ov-test__mid { fill: var(--s-graphite); }
.ov-test__mid.is-a { fill: var(--s-accent); }
.ov-test__bar { fill: var(--s-rule-strong); transform-box: fill-box; transform-origin: bottom; transition: transform var(--s-dur-bar) var(--s-ease); transition-delay: calc(var(--i) * var(--s-stagger)); }
.ov-test__bar.is-target { fill: var(--s-accent); }
.ov-js .ov-test:not(.is-in) .ov-test__bar { transform: scaleY(0); }
.ov-test__key { font-family: var(--s-font-mono); font-size: 12px; fill: var(--s-graphite); }
.ov-test__key.is-a { fill: var(--s-accent); font-weight: var(--s-weight-semi); }
.ov-test figcaption { display: grid; gap: var(--s-space-1); color: var(--s-graphite); }
.ov-test figcaption strong { color: var(--s-ink); }
.ov-test__n { font-family: var(--s-font-mono); font-size: var(--s-size-mono-s); color: var(--s-accent); }

/* ── science: house rules ─────────────────────────────────────── */
.ov-rules__grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: var(--s-space-8); align-items: start; }
.ov-rules .ov-statement { margin-top: var(--s-space-4); }
.ov-rules__list { border-top: var(--s-rule-w) solid var(--s-ink); }
.ov-rules__list li {
    display: grid; grid-template-columns: var(--s-space-8) minmax(0, 1fr); gap: var(--s-space-3);
    padding-block: var(--s-space-5); border-bottom: var(--s-hairline) solid var(--s-rule);
    font-size: var(--s-size-h3); line-height: var(--s-leading-snug); letter-spacing: var(--s-track-h2);
}
.ov-rules__n { font-family: var(--s-font-mono); font-size: var(--s-size-mono); color: var(--s-accent); padding-top: var(--s-space-1); }

/* ── careers: words beside a portrait ─────────────────────────── */
.ov-phead--careers { padding-top: var(--s-space-6); }
.ov-split { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: var(--s-space-8); align-items: stretch; padding-bottom: var(--s-space-7); }
.ov-split__text { display: flex; flex-direction: column; gap: var(--s-space-5); align-items: flex-start; }
.ov-split__text .ov-crumb { align-self: stretch; }
.ov-split__text .ov-phead__title { font-size: var(--s-size-statement); margin-top: var(--s-space-4); }
.ov-split__photo { position: relative; overflow: hidden; background: var(--s-dark); max-height: calc(100svh - var(--s-nav-h) - var(--s-ribbon-h) - var(--s-space-8)); clip-path: polygon(0 0, calc(100% - var(--s-chamfer)) 0, 100% var(--s-chamfer), 100% 100%, 0 100%); }
.ov-split__photo picture { position: absolute; inset: 0; }   /* the photo fills the height the copy sets, so no gap opens above the steps */
.ov-split__photo picture, .ov-split__img { width: 100%; height: 100%; }
.ov-split__img { object-fit: cover; object-position: 50% 30%; animation: ov-settle var(--s-dur-hero-in) var(--s-ease) both; }
.ov-process { width: 100%; margin-top: var(--s-space-6); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: var(--s-hairline) solid var(--s-rule); }
.ov-process li { display: grid; gap: var(--s-space-1); padding: var(--s-space-4) var(--s-space-4) 0 0; font-size: var(--s-size-small); line-height: var(--s-leading-snug); }
.ov-process li + li { padding-left: var(--s-space-4); border-left: var(--s-hairline) solid var(--s-rule); }
.ov-process span { font-family: var(--s-font-mono); font-size: var(--s-size-mono-s); color: var(--s-accent); }

/* careers: the role list */
.ov-jobs { background: var(--s-paper); }
.ov-section.ov-jobs { padding-top: var(--s-space-7); }   /* the roles start where the first screen ends, not a band of empty paper later */
.ov-jobs__head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-space-4); align-items: end; margin-bottom: var(--s-space-6); }
.ov-jobs__head .ov-label, .ov-jobs__head .ov-h2 { grid-column: 1 / -1; }
.ov-filter { display: flex; flex-wrap: wrap; gap: var(--s-space-2); }
.ov-filter[hidden] { display: none; }
.ov-filter button {
    min-height: var(--s-touch); padding: var(--s-space-2) var(--s-space-4);
    border: var(--s-hairline) solid var(--s-rule-strong); background: var(--s-paper); cursor: pointer;
    font-family: var(--s-font-mono); font-size: var(--s-size-mono);
    transition: background-color var(--s-dur-fast) var(--s-ease), color var(--s-dur-fast) var(--s-ease);
}
.ov-filter button[aria-pressed="true"] { background: var(--s-ink); border-color: var(--s-ink); color: var(--s-paper); }
.ov-jobs__count { font-family: var(--s-font-mono); font-size: var(--s-size-mono); color: var(--s-graphite); }
.ov-joblist { border-top: var(--s-rule-w) solid var(--s-ink); }
.ov-job {
    display: grid; grid-template-columns: 10ch minmax(0, 1fr) 16ch 10ch auto;
    gap: var(--s-space-2) var(--s-space-5); align-items: center;
    padding-block: var(--s-space-4); border-bottom: var(--s-hairline) solid var(--s-rule);
    animation: ov-open var(--s-dur) var(--s-ease);
}
.ov-job[hidden] { display: none; }
.ov-job__ref { color: var(--s-accent); font-size: var(--s-size-mono); }
.ov-job__title { font-size: var(--s-size-body); font-weight: var(--s-weight-semi); }
.ov-job__site, .ov-job__type { font-family: var(--s-font-mono); font-size: var(--s-size-mono); color: var(--s-graphite); }
.ov-job__apply {
    min-height: var(--s-touch); padding: var(--s-space-2) var(--s-space-4);
    border: var(--s-hairline) solid var(--s-ink); background: transparent; cursor: pointer;
    font-weight: var(--s-weight-semi);
}
.ov-job__apply:hover { background: var(--s-ink); color: var(--s-paper); }
.ov-job__note { grid-column: 2 / -1; padding: var(--s-space-3) var(--s-space-4); background: var(--s-tint-soft); border-left: var(--s-rule-w) solid var(--s-accent); font-size: var(--s-size-small); }

/* careers: a day in the lab */
.ov-day { padding-block: var(--s-section); background-color: var(--s-bg);
    background-image: linear-gradient(var(--s-grid) var(--s-hairline), transparent var(--s-hairline)), linear-gradient(90deg, var(--s-grid) var(--s-hairline), transparent var(--s-hairline));
    background-size: var(--s-space-5) var(--s-space-5); border-top: var(--s-hairline) solid var(--s-rule); }
.ov-day__grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: var(--s-space-8); align-items: start; }
.ov-day__photo { position: sticky; top: calc(var(--s-nav-h) + var(--s-ribbon-h) + var(--s-space-5)); padding: var(--s-space-3); background: var(--s-paper); border: var(--s-hairline) solid var(--s-rule-strong); }
.ov-day__img { width: 100%; height: auto; }
.ov-day__log .ov-h2 { margin: var(--s-space-3) 0 var(--s-space-6); }
.ov-timeline { border-top: var(--s-rule-w) solid var(--s-ink); background: var(--s-paper); }
.ov-timeline li { display: grid; grid-template-columns: 8ch minmax(0, 1fr); gap: var(--s-space-4); padding: var(--s-space-4); border-bottom: var(--s-hairline) dashed var(--s-rule-strong); font-family: var(--s-font-mono); font-size: var(--s-size-mono); line-height: var(--s-leading-mono); }
.ov-timeline__t { color: var(--s-accent); font-weight: var(--s-weight-semi); font-variant-numeric: tabular-nums; }

/* careers: the offer */
.ov-offer .ov-h2 { margin: var(--s-space-3) 0 var(--s-space-7); max-width: var(--s-measure-narrow); }
.ov-offer__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: var(--s-rule-w) solid var(--s-ink); }
.ov-offer__grid li { display: grid; gap: var(--s-space-2); align-content: start; padding: var(--s-space-5) var(--s-space-5) var(--s-space-5) 0; }
.ov-offer__grid li + li { padding-left: var(--s-space-5); border-left: var(--s-hairline) solid var(--s-rule); }
.ov-offer__grid p { color: var(--s-graphite); font-size: var(--s-size-small); }
.ov-offer__n { font-family: var(--s-font-mono); font-size: var(--s-size-mono-s); color: var(--s-accent); }

/* ── partners ─────────────────────────────────────────────────── */
.ov-ledger__grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: var(--s-space-8); align-items: start; }
.ov-ledger__grid header { display: grid; gap: var(--s-space-4); justify-items: start; }
.ov-ledger__cells { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: var(--s-rule-w) solid var(--s-ink); border-left: var(--s-hairline) solid var(--s-rule); }
.ov-ledger__cells li { display: grid; gap: var(--s-space-2); align-content: start; padding: var(--s-space-5); border-right: var(--s-hairline) solid var(--s-rule); border-bottom: var(--s-hairline) solid var(--s-rule); background: var(--s-paper); }
.ov-ledger__cells p { color: var(--s-graphite); font-size: var(--s-size-small); }
.ov-ledger__k { font-family: var(--s-font-mono); font-weight: var(--s-weight-semi); color: var(--s-accent); }
/* the ledger ends on its last cell and the calendar starts on its kicker: no dead band between (review round 1) */
.ov-section.ov-ledger { padding-block: var(--s-space-8); }
.ov-section.ov-calendar { padding-top: var(--s-space-8); }
.ov-calendar { background: var(--s-paper); border-top: var(--s-hairline) solid var(--s-rule); }
.ov-calendar .ov-wrap { display: grid; grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr); gap: var(--s-space-6) var(--s-space-8); align-items: start; }
/* the heading sits beside the dated cards, not alone above them (review round 2) */
.ov-calendar__head { display: grid; gap: var(--s-space-4); justify-items: start; position: sticky; top: var(--s-space-9); }
.ov-calendar__lede { color: var(--s-graphite); max-width: var(--s-measure-narrow); }
.ov-calendar__note { font-family: var(--s-font-mono); font-size: var(--s-size-mono); color: var(--s-graphite); }
.ov-calendar__tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-space-4); }
.ov-tile {
    display: grid; gap: var(--s-space-2); align-content: start;
    padding: var(--s-space-5); background: var(--s-bg); border: var(--s-hairline) solid var(--s-rule);
    border-top: var(--s-space-2) solid var(--s-ink);
}
.ov-tile.is-next { border-top-color: var(--s-accent); background: var(--s-tint-soft); }
.ov-tile__month { font-family: var(--s-font-mono); font-size: var(--s-size-mono-s); letter-spacing: var(--s-track-label); text-transform: uppercase; color: var(--s-graphite); }
.ov-tile__day { font-family: var(--s-font-mono); font-size: var(--s-size-statement); font-weight: var(--s-weight-semi); line-height: var(--s-leading-solid); font-variant-numeric: tabular-nums; }
.ov-tile.is-next .ov-tile__day { color: var(--s-accent); }
.ov-tile__what { font-size: var(--s-size-body); }
.ov-tile p { color: var(--s-graphite); font-size: var(--s-size-small); }
/* the calendar runs straight into the clinicians' desk (review round 2: the gap read loose) */
.ov-section.ov-clinic { padding-top: var(--s-space-8); }
.ov-section.ov-calendar { padding-bottom: var(--s-space-8); }
.ov-clinic__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-space-8); align-items: start; }
.ov-clinic__grid header { display: grid; gap: var(--s-space-4); justify-items: start; }
.ov-clinic__body { color: var(--s-graphite); max-width: var(--s-measure); }
.ov-studies { display: grid; gap: var(--s-space-4); }
.ov-study { display: grid; gap: var(--s-space-2); padding: var(--s-space-5); background: var(--s-paper); border: var(--s-hairline) solid var(--s-rule); border-left: var(--s-space-1) solid var(--s-accent); }
.ov-study__id { font-size: var(--s-size-h3); }
.ov-study__meta { font-family: var(--s-font-mono); font-size: var(--s-size-mono); color: var(--s-graphite); }
.ov-study__area { font-weight: var(--s-weight-semi); }
.ov-study__link { display: inline-flex; align-items: center; min-height: var(--s-touch); font-weight: var(--s-weight-semi); }

/* the desk form */
.ov-write { background: var(--s-paper); border-top: var(--s-rule-w) solid var(--s-ink); }
.ov-write__grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: var(--s-space-8); align-items: start; }
.ov-write__grid header { display: grid; gap: var(--s-space-4); }
.ov-write__concept { font-family: var(--s-font-mono); font-size: var(--s-size-mono); color: var(--s-graphite); padding: var(--s-space-3) var(--s-space-4); border: var(--s-hairline) solid var(--s-accent); justify-self: start; }
.ov-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-space-5); }
.ov-seg { grid-column: 1 / -1; display: flex; flex-wrap: wrap; margin: 0; padding: 0; border: 0; }
.ov-form__legend { width: 100%; margin-bottom: var(--s-space-2); font-family: var(--s-font-mono); font-size: var(--s-size-mono-s); letter-spacing: var(--s-track-label); text-transform: uppercase; color: var(--s-graphite); }
.ov-seg input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ov-seg label {
    display: inline-flex; align-items: center; min-height: var(--s-touch);
    padding: var(--s-space-2) var(--s-space-5); border: var(--s-hairline) solid var(--s-ink);
    margin-right: calc(var(--s-hairline) * -1); cursor: pointer; font-weight: var(--s-weight-medium);
    transition: background-color var(--s-dur-fast) var(--s-ease), color var(--s-dur-fast) var(--s-ease);
}
.ov-seg input:checked + label { background: var(--s-accent); border-color: var(--s-accent); color: var(--s-accent-ink); position: relative; }
.ov-seg input:focus-visible + label { outline: var(--s-rule-w) solid var(--s-focus); outline-offset: var(--s-space-1); }
.ov-field { display: grid; gap: var(--s-space-2); }
.ov-field--wide { grid-column: 1 / -1; }
.ov-field label { font-weight: var(--s-weight-medium); font-size: var(--s-size-small); }
.ov-field__req { font-family: var(--s-font-mono); font-size: var(--s-size-mono-s); color: var(--s-faint); }
.ov-field input, .ov-field textarea {
    width: 100%; min-height: var(--s-touch); padding: var(--s-space-3);
    border: var(--s-hairline) solid var(--s-rule-strong); border-bottom: var(--s-rule-w) solid var(--s-ink);
    background: var(--s-bg); color: var(--s-ink); font: inherit; font-size: var(--s-size-body); border-radius: var(--s-radius);
}
.ov-field input:focus, .ov-field textarea:focus { outline: none; border-bottom-color: var(--s-accent); background: var(--s-paper); box-shadow: inset 0 calc(var(--s-rule-w) * -1) 0 var(--s-accent); }
.ov-field.is-invalid input, .ov-field.is-invalid textarea { border-bottom-color: var(--s-error); }
.ov-field.is-invalid label { color: var(--s-error); }
button.ov-btn { padding: 0; cursor: pointer; justify-self: start; }
.ov-form__status { grid-column: 1 / -1; font-family: var(--s-font-mono); font-size: var(--s-size-mono); }
.ov-form__status:empty { display: none; }
.ov-form__status.is-ok { padding: var(--s-space-4); background: var(--s-tint-soft); border-left: var(--s-rule-w) solid var(--s-accent); }
.ov-form__status.is-error { color: var(--s-error); }
.ov-form__status:focus { outline: none; }

/* ── tablet ───────────────────────────────────────────────────── */
@media (max-width: 1100px) {
    .ov-prog__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .ov-prog__id { position: static; grid-column: 1 / -1; }
    .ov-gates__list { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: var(--s-space-7); }
    .ov-gates__line { display: none; }
    .ov-tests__grid, .ov-offer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ov-calendar .ov-wrap { grid-template-columns: minmax(0, 1fr); }
    .ov-calendar__head { position: static; }
    .ov-offer__grid li:nth-child(3) { padding-left: 0; border-left: 0; }
    .ov-job { grid-template-columns: 10ch minmax(0, 1fr) auto; }
    .ov-job__site, .ov-job__type { grid-row: 2; }
    .ov-job__site { grid-column: 2; }
}
@media (max-width: 900px) {
    .ov-deal { grid-template-columns: minmax(0, 1fr); gap: var(--s-space-6); }
    .ov-sheet { max-width: 620px; }
    .ov-phead__grid, .ov-rules__grid, .ov-ledger__grid, .ov-clinic__grid, .ov-write__grid, .ov-day__grid, .ov-split { grid-template-columns: minmax(0, 1fr); gap: var(--s-space-6); }
    .ov-phead--pipeline .ov-phead__lede, .ov-phead--pipeline .ov-figures, .ov-index { grid-column: 1; grid-row: auto; }
    .ov-day__photo { position: static; max-width: var(--s-measure-narrow); }
    .ov-split__photo { order: -1; aspect-ratio: 4 / 3; max-height: none; }
    .ov-phead--careers .ov-split__img { object-position: 50% 74%; }   /* the vials, not the dark panel above them */
}

/* ── phone ────────────────────────────────────────────────────── */
@media (max-width: 760px) {
    .ov-phead { padding-top: var(--s-space-6); }
    .ov-prog__grid { grid-template-columns: minmax(0, 1fr); gap: var(--s-space-5); }
    .ov-index a { grid-template-columns: 9ch minmax(0, 1fr) 8ch; }
    .ov-index a .ov-track { grid-column: 1 / -1; grid-row: 2; }
    .ov-band { height: 34svh; }
    .ov-band__figs { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); clip-path: none; }
    .ov-gates__list { grid-template-columns: minmax(0, 1fr); gap: var(--s-space-4); }
    .ov-gate { grid-template-columns: var(--s-space-8) minmax(0, 1fr); column-gap: var(--s-space-4); }
    .ov-gate__n { grid-row: span 2; }
    .ov-gate__name { margin-top: 0; }
    .ov-tests__grid, .ov-calendar__tiles, .ov-offer__grid, .ov-ledger__cells, .ov-process { grid-template-columns: minmax(0, 1fr); }
    .ov-offer__grid li, .ov-offer__grid li + li { padding: var(--s-space-4) 0; border-left: 0; border-bottom: var(--s-hairline) solid var(--s-rule); }
    .ov-process li + li { padding-left: 0; border-left: 0; }
    .ov-tile { grid-template-columns: auto minmax(0, 1fr); column-gap: var(--s-space-4); }
    .ov-tile__day { grid-row: 1 / span 3; font-size: var(--s-size-figure); }
    .ov-jobs__head { grid-template-columns: minmax(0, 1fr); }
    .ov-filter { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
    .ov-filter button { flex: none; }
    .ov-job { grid-template-columns: minmax(0, 1fr) auto; }
    .ov-job__title { grid-column: 1 / -1; grid-row: 1; }
    .ov-job__ref { grid-row: 2; }
    .ov-job__site { grid-column: 1; grid-row: 3; }
    .ov-job__type { grid-column: 2; grid-row: 2; justify-self: end; }
    .ov-job__apply { grid-column: 2; grid-row: 3; }
    .ov-job__note { grid-column: 1 / -1; }
    .ov-timeline li { grid-template-columns: minmax(0, 1fr); gap: var(--s-space-1); }
    .ov-form { grid-template-columns: minmax(0, 1fr); }
    .ov-seg label { flex: 1 1 auto; justify-content: center; }
}

@media (max-width: 760px) {
    .ov-sheet { padding: var(--s-space-2) var(--s-space-3) var(--s-space-5) 0; }
    .ov-sheet::before, .ov-sheet::after { inset: var(--s-space-2) var(--s-space-3) var(--s-space-5) 0; }
    .ov-sheet__paper { padding: var(--s-space-5) var(--s-space-4) var(--s-space-4); transform: none; }
    .ov-sheet__terms div { grid-template-columns: minmax(0, 1fr); gap: 0; }
    .ov-sheet__top { flex-direction: column; gap: var(--s-space-1); }
    .ov-sheet__gates ol { grid-template-columns: minmax(0, 1.35fr) repeat(3, minmax(0, 1fr)); }
    .ov-calendar__tiles { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
    .ov-sheet__terms div::after, .ov-sheet__gates ol::before, .ov-sheet__pin, .ov-sheet__stamp { transition: none; }
    .ov-js .ov-gates__path:not(.is-in) .ov-gates__line line, .ov-js .ov-test:not(.is-in) .ov-test__a, .ov-js .ov-test:not(.is-in) .ov-test__b { stroke-dashoffset: 0; }
    .ov-js .ov-test:not(.is-in) .ov-test__bar { transform: none; }
}