/* Made client program hub — shared section layer over styles.css (tokens, nav, hero, present bar).
   Made Scientific key art (brand guide V1.2, as on madescientific.com and the sign-in page): white ground,
   charcoal headings, biomorphic shapes used large and cropped, a filled vial, momentum arrows. Made teal
   carries tables, figures and the footer. Funnel Display for headings, Funnel Sans for everything else. */

/* ── Nav additions ─────────────────────────────────────────────────── */
.lockup-x { color: var(--aqua); font-size: 18px; margin: 0 2px 0 4px; }
.lockup-client { font-family: var(--font-disp); font-weight: 700; font-size: 17px; color: var(--teal); letter-spacing: -0.01em; }

/* ── Client mark: a text wordmark on this hub (see secretome.css). */
.mark-client { height: 26px; width: auto; display: block; }
.hero-marks { gap: 16px; }
.hero-lockup-client { height: 36px; }
.hero-mark-x { color: #9AA3A6; font-size: 20px; line-height: 1; }
.nav-links a { font-size: 12.5px; font-weight: 600; color: var(--char); text-decoration: none; white-space: nowrap;
  padding: 6px 2px; border-bottom: 2px solid transparent; }
.nav-links a:hover, .nav-links a.is-active { border-bottom-color: var(--green); }
.nav-toggle, .nav-present { flex-shrink: 0; font: 600 12px/1 var(--font); border-radius: 999px; padding: 8px 12px; cursor: pointer;
  border: 1px solid var(--line); background: var(--white); color: var(--teal); white-space: nowrap; }
.nav-toggle::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--cyan); margin-right: 7px; vertical-align: 1px; }
.nav-toggle[aria-pressed="false"] { color: var(--grey); }
.nav-toggle[aria-pressed="false"]::before { background: var(--line); }
.nav-present { background: var(--teal); color: var(--white); border-color: var(--teal); }
.nav-present:hover { background: var(--teal-d); }
@media (max-width: 900px) { .nav-present, .lockup-client, .lockup-x, .mark-client { display: none; } }
/* The hero lockup stays at both widths — it is the only branding in present mode. */
@media (max-width: 640px) { .hero-lockup { height: 32px; } .hero-lockup-client { height: 27px; } }

/* ── Hero: the sign-in page's key art on a white ground ────────────── */
.hero { position: relative; overflow: hidden; padding: 56px 0 44px; background: var(--white); color: var(--char); }
.hero h1 { font-size: clamp(38px, 5.4vw, 62px); line-height: 1.02; margin: 8px 0 18px; color: var(--char); }
.hero-kicker { font-size: 11.5px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; color: var(--green); margin: 0; }
.hero-lede { font-size: 18.5px; line-height: 1.5; color: #4A5558; max-width: 600px; margin: 0 0 20px; }
.hero-tagline { font-family: var(--font-disp); font-weight: 700; font-size: 20px; letter-spacing: -0.01em; color: var(--char); margin: 0; }
.hero-tagline b { color: var(--green); }
.hero .rule { margin-top: 26px; }
.hero .stamp { color: #6B7A7D; }
/* Title on the left; on the right the photograph in a biomorphic mask with capsules, the aqua stroke and the
   filled vial. The drawing may run past its box and is cropped by the hero's lower edge, as on the sign-in. */
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(28px, 4vw, 64px); align-items: center; }
.hero-copy { position: relative; z-index: 1; min-width: 0; }
.hero-art { margin: 0; }
.hero-art svg { display: block; height: clamp(360px, 36vw, 520px); width: auto; aspect-ratio: 720 / 900; overflow: visible; }
.hero-corner { display: none; position: absolute; top: 0; left: 0; width: clamp(180px, 15vw, 300px); height: auto;
  transform: translate(-40%, -40%); pointer-events: none; }
@media (min-width: 1400px) { .hero-corner { display: block; } }
@media (max-width: 760px) { .hero-grid { grid-template-columns: minmax(0, 1fr); } .hero-art { display: none; } .hero { padding-bottom: 36px; } }

/* ── Section rhythm ────────────────────────────────────────────────── */
main > section.wrap { padding-top: 64px; padding-bottom: 40px; }
main > section.wrap + section.wrap { border-top: 1px solid var(--line); }
main h2 { font-size: clamp(26px, 3vw, 34px); color: var(--char); margin: 4px 0 12px; line-height: 1.15; }
main h3 { font-size: 17px; color: var(--teal); margin: 26px 0 10px; }
main .h3-rule { margin-top: 40px; padding-top: 18px; border-top: 1px solid var(--line); }
main .lede { font-size: 17.5px; line-height: 1.5; color: #4A5558; max-width: 780px; margin: 0 0 22px; }
main p { max-width: 860px; font-size: 15px; line-height: 1.6; }
.micro { font-size: 12.5px; color: var(--grey); line-height: 1.5; margin-top: 18px; max-width: 900px; }
.note { font-size: 13px; color: var(--teal); margin: 12px 0 0; font-weight: 600; }
.clean { list-style: none; padding: 0; margin: 0; }
.clean li { position: relative; padding-left: 18px; margin: 0 0 10px; font-size: 14.5px; line-height: 1.55; }
.clean li::before { content: ''; position: absolute; left: 0; top: 9px; width: 8px; height: 8px; border-radius: 2px; background: var(--green); }
.callout { border-radius: 12px; padding: 18px 22px; font-size: 14.5px; line-height: 1.6; margin-top: 22px; }
.callout-intro { background: var(--cyan-t); border-color: var(--cyan); margin-top: 26px; }
.callout-intro b { color: var(--teal); }

/* ── Fact strip ────────────────────────────────────────────────────── */
.facts { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; margin: 8px 0 34px; }
.fact { border-left: 3px solid var(--green); padding: 2px 0 2px 14px; }
.fact b { display: block; font-family: var(--font-disp); font-size: 27px; font-weight: 700; color: var(--teal); line-height: 1.05; }
.fact span { display: block; font-size: 12px; color: var(--grey); margin-top: 4px; line-height: 1.3; }

/* ── Response cards (not used on this hub) ───────────────────────── */
.change-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 14px; }
.ec-head { font-size: 10.5px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: #007A99; margin-bottom: 8px; }
.ec-change { margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(0,84,95,0.14); font-size: 13.5px; line-height: 1.5; color: #2E3E41; font-style: normal; }
.ec-change b { display: block; font-size: 10.5px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--teal); margin-bottom: 4px; }
.ec-compact { margin-top: 16px; padding: 12px 16px; }

/* ── Workstream cards ──────────────────────────────────────────────── */
.ws-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 8px; }
.ws-card { background: var(--white); border: 1px solid var(--line); border-radius: 12px; padding: 20px 22px 18px; box-shadow: 0 1px 2px rgba(0,0,0,0.03); }
.ws-must { border-top: 4px solid var(--green); }
.ws-par { border-top: 4px solid var(--aqua); }
.ws-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.ws-num { font-family: var(--font); font-size: 11.5px; font-weight: 600; color: var(--grey); letter-spacing: 0.06em; font-variant-numeric: tabular-nums; }
.pill { font-size: 10.5px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; border-radius: 999px; padding: 4px 9px; }
.pill-must { background: #EAF6E5; color: #2E7D1E; }
.pill-par { background: var(--tint); color: var(--teal); }
.ws-card h3 { margin: 4px 0 8px; font-size: 18px; }
.ws-card p { font-size: 14px; margin: 0 0 12px; }
.ws-card dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 0; font-size: 12.5px; border-top: 1px solid var(--line); padding-top: 10px; }
.ws-card dt { color: var(--grey); font-weight: 600; }
.ws-card dd { margin: 0; color: var(--char); }

/* ── Tables ────────────────────────────────────────────────────────── */
.tscroll { overflow-x: auto; margin: 10px 0 6px; -webkit-overflow-scrolling: touch; }
.tbl { width: 100%; border-collapse: collapse; font-size: 13.5px; line-height: 1.45; min-width: 620px; }
.tbl caption { text-align: left; font-family: var(--font-disp); font-weight: 700; color: var(--teal); font-size: 15px; padding: 14px 0 8px; caption-side: top; }
.tbl th { text-align: left; font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--white); background: var(--teal); padding: 9px 11px; font-weight: 700; }
.tbl td { padding: 10px 11px; border-bottom: 1px solid var(--line); vertical-align: top; }
.tbl tr:last-child td { border-bottom: 2px solid var(--line); }
.tbl .rl { font-weight: 700; color: var(--teal); }
.tbl .src { font-size: 11.5px; color: var(--grey); white-space: nowrap; }
.tbl .mono { font-family: var(--font); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.tbl .num, .tbl th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tbl .code { font-family: var(--font); font-size: 12.5px; font-weight: 600; color: var(--grey); font-variant-numeric: tabular-nums; }
.tbl tr.tot td { font-weight: 700; background: var(--tint); color: var(--teal); }
.tbl tr.band td { background: var(--tint); font-weight: 700; color: var(--teal); font-size: 12px; letter-spacing: 0.8px; text-transform: uppercase; }
.tbl-tight { font-size: 12.5px; min-width: 480px; }
.tbl-tight td { padding: 7px 10px; }
.chip { display: inline-block; font-size: 10.5px; font-weight: 700; letter-spacing: 0.8px; text-transform: uppercase; border-radius: 4px; padding: 2px 7px; margin-right: 6px; vertical-align: 1px; white-space: nowrap; }
.chip-dev { background: #FFF2D6; color: #8A5A00; }
.chip-adapt { background: #E8F1FB; color: #1B4F8A; }
.chip-proven { background: #EAF6E5; color: #2E7D1E; }
.chip-gap, .chip-open { background: #FDE8E4; color: #A33A1F; }
.chip-have { background: var(--tint); color: var(--teal); }
.chip-base { background: #EEEEF1; color: #444; margin-left: 6px; }
.chip-soon { background: var(--cyan-t); color: #007A99; }
.chip-partner { background: #F1EAFB; color: #5B2E91; }
.chip-made { background: var(--tint); color: var(--teal); }

/* ── Calculators ───────────────────────────────────────────────────── */
.calc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 10px; }
.calc-panel { background: var(--fill); border: 1px solid var(--line); border-radius: 12px; padding: 20px 22px 18px; }
.calc-panel h3 { margin: 0 0 14px; }
.ctrl { margin: 0 0 14px; }
.ctrl label { display: flex; gap: 4px; font-size: 13px; font-weight: 600; color: var(--char); margin-bottom: 6px; }
.ctrl label output { margin-left: auto; }
.ctrl output { font-family: var(--font); font-weight: 700; color: var(--teal); font-variant-numeric: tabular-nums; }
.ctrl input[type=range] { width: 100%; accent-color: var(--green); }
.ctrl-wide { max-width: 760px; margin-top: 6px; }
.snaps { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--grey); margin-top: 4px; }
.snaps span { cursor: pointer; border-bottom: 1px dotted var(--grey); }
.snaps span:hover { color: var(--teal); }
.readout { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 16px 0 4px; }
.ro { background: var(--white); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; }
.ro span { display: block; font-size: 11.5px; color: var(--grey); }
.ro b { display: block; font-family: var(--font-disp); font-size: 26px; color: var(--teal); line-height: 1.1; margin: 4px 0 2px; font-variant-numeric: tabular-nums; }
.ro em { font-style: normal; font-size: 11.5px; color: var(--grey); }
.ro-wide { grid-column: 1 / -1; }
.band { margin-top: 14px; }
.band-track { position: relative; height: 10px; border-radius: 5px; background: linear-gradient(90deg, #DCE3E4 0%, #DCE3E4 100%); overflow: visible; }
.band-track::before { content: ''; position: absolute; left: 0; right: 0; top: 0; bottom: 0; border-radius: 5px; background: #CFE9DD; }
.band-fill { position: absolute; top: -4px; width: 3px; height: 18px; background: var(--teal); border-radius: 2px; transition: left .12s; }
.band-fill.is-out { background: #C8401F; }
.band-scale { display: flex; justify-content: space-between; font-size: 11px; color: var(--grey); margin-top: 6px; }

/* ── Split layouts and figures ─────────────────────────────────────── */
.split { display: grid; grid-template-columns: 1.15fr 1fr; gap: 32px; align-items: start; margin-top: 10px; }
/* Grid items default to min-width:auto and will not shrink below a child table's min-width —
   the table's own scroll container must be allowed to do the scrolling. */
.split > *, .calc-grid > *, .site-grid > *, .change-grid > *, .ws-grid > *, .terms-grid > *, .agenda > * { min-width: 0; }
.split-tight { margin-top: 30px; }
.fig { margin: 0; background: var(--fill); border: 1px solid var(--line); border-radius: 12px; padding: 16px; }
.fig img { width: 100% !important; max-width: 100%; min-width: 0 !important; height: auto !important; display: block; }
.fig figcaption { font-size: 12px; color: var(--grey); margin-top: 10px; }
.fig-wide { margin-top: 26px; max-width: 980px; }
#separation .split { grid-template-columns: 1fr; }

/* ── Hold-time clock ───────────────────────────────────────────────── */
.clock { display: flex; height: 44px; border-radius: 8px; overflow: hidden; margin: 18px 0 10px; border: 1px solid var(--line); background: var(--fill); }
.clock > div { display: flex; align-items: center; justify-content: center; font-size: 11.5px; font-weight: 700; color: var(--white); white-space: nowrap; overflow: hidden; transition: flex-basis .15s; }
.clock .c-isch { background: #6B7280; } .clock .c-proc { background: #0E7C86; } .clock .c-cult { background: var(--teal); }
.clock .c-rel { background: #2F8F7B; } .clock .c-ship { background: var(--green); } .clock .c-neg { background: #C8401F; }
.clock-key { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 12px; color: var(--grey); }
.clock-key .k { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.k-isch { background: #6B7280; } .k-proc { background: #0E7C86; } .k-cult { background: var(--teal); } .k-rel { background: #2F8F7B; } .k-ship { background: var(--green); }

/* ── Sites ─────────────────────────────────────────────────────────── */
.site-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 8px; }
.site-card { background: var(--white); border: 1px solid var(--line); border-radius: 12px; padding: 22px 24px 18px; }
.site-card-gmp { border-top: 4px solid var(--green); }
.site-card:not(.site-card-gmp) { border-top: 4px solid var(--aqua); }
.site-tag { font-size: 10.5px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--grey); }
.site-card h3 { margin: 6px 0 2px; font-size: 21px; }
.site-addr { font-size: 12.5px; color: var(--grey); margin: 0 0 14px !important; }
.plan-tools { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; margin: 14px 0 10px; }
.plan-jump { display: flex; flex-wrap: wrap; gap: 6px; }
.plan-zoom { display: flex; align-items: center; gap: 6px; }
.plan-zoom button { width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--line); background: var(--white); color: var(--teal); font-size: 18px; cursor: pointer; }
.plan-zoom button:hover { border-color: var(--teal); }
.plan-check { font-size: 12.5px; color: var(--char); margin-left: 10px; display: inline-flex; align-items: center; gap: 6px; }
.plan-viewer { position: relative; height: 560px; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: #EEF1F2; cursor: grab; touch-action: none; user-select: none; }
.plan-viewer:active { cursor: grabbing; }
.plan-viewer:focus { outline: 2px solid var(--cyan); outline-offset: 2px; }
.plan-stage { position: absolute; left: 0; top: 0; width: 3600px; height: 1788px; transform-origin: 0 0; will-change: transform; }
.plan-stage img { width: 3600px; height: 1788px; display: block; pointer-events: none; }
.plan-overlay { position: absolute; left: 0; top: 0; width: 3600px; height: 1788px; pointer-events: none; }
.plan-overlay.is-off { display: none; }
.pl-suite { fill: rgba(67,176,42,0.22); stroke: var(--green); stroke-width: 6; }
.pl-label { font-family: var(--font); font-weight: 700; font-size: 26px; fill: var(--teal); paint-order: stroke; stroke: #fff; stroke-width: 8; stroke-linejoin: round; }
.pl-path { fill: none; stroke: var(--teal); stroke-width: 7; stroke-dasharray: 22 16; stroke-linecap: round; stroke-linejoin: round; }
.pl-dot { fill: var(--teal); stroke: #fff; stroke-width: 5; }
.plan-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; font-size: 12px; color: var(--grey); margin-top: 10px; }
.plan-legend i { display: inline-block; width: 12px; height: 12px; border: 1px solid rgba(0,0,0,0.15); border-radius: 2px; margin-right: 6px; vertical-align: -1px; }
.plan-src { flex-basis: 100%; font-size: 11.5px; }

/* ── Gantt ─────────────────────────────────────────────────────────── */
.gantt { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; margin-top: 10px; font-size: 12.5px; }
.g-row { display: grid; grid-template-columns: 300px repeat(6, 1fr); border-bottom: 1px solid var(--line); }
.g-row:last-child { border-bottom: none; }
.g-head { background: var(--teal); color: var(--white); font-size: 11px; letter-spacing: 1px; text-transform: uppercase; font-weight: 700; }
.g-head > div { padding: 9px 12px; text-align: center; }
.g-head > div:first-child { text-align: left; }
.g-label { padding: 10px 12px; font-weight: 600; color: var(--char); border-right: 1px solid var(--line); }
.g-cell { border-right: 1px solid var(--fill); background: var(--white); }
.g-cell.g-on { background: #57BEC9; }
.g-cell.g-on.g-opt { background: #BFE3E8; }
.g-row:nth-child(even) .g-cell:not(.g-on) { background: var(--fill); }
.milestones { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 20px; }
.ms { border-left: 3px solid var(--green); padding-left: 12px; }
.ms b { display: block; font-family: var(--font-disp); color: var(--teal); font-size: 17px; }
.ms span { display: block; font-size: 12.5px; color: var(--grey); margin-top: 3px; line-height: 1.4; }

/* ── Proposal ──────────────────────────────────────────────────────── */
.doc-grid-2 { grid-template-columns: 1fr 1fr; }
.doc-card { text-decoration: none; color: inherit; display: flex; gap: 14px; align-items: flex-start; background: var(--white); border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; transition: border-color .15s, box-shadow .15s; }
.doc-card:hover { border-color: var(--teal); box-shadow: 0 6px 18px rgba(0,84,95,0.08); }
.doc-icon { flex-shrink: 0; width: 46px; height: 56px; border-radius: 6px; background: var(--teal); color: var(--white); font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; letter-spacing: 1px; }
.wbs-tbl .wbs-band td { background: var(--tint); color: var(--teal); font-weight: 700; font-size: 11.5px; letter-spacing: 0.8px; text-transform: uppercase; }
.wbs-tbl .wbs-sub td { font-weight: 700; color: var(--teal); }
.wbs-tbl .wbs-total td { background: var(--tint); font-weight: 700; color: var(--teal); }
.wbs-scope { margin: 6px 0 0; padding-left: 16px; font-size: 12.5px; color: #3A4A4D; }
.wbs-scope li { margin-bottom: 3px; }
.wbs-toggle { background: none; border: none; color: var(--teal); font: 600 12px var(--font); cursor: pointer; padding: 0; text-decoration: underline dotted; }
.wbs-detail { display: none; }
.wbs-detail.is-open { display: block; }
.terms-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: 28px; }
.term { background: var(--fill); border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; font-size: 13.5px; line-height: 1.55; }
.term b { display: block; font-family: var(--font-disp); color: var(--teal); font-size: 15px; margin-bottom: 4px; }

/* ── Register ──────────────────────────────────────────────────────── */
.filters { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 8px 0 18px; }
.fchip { font: 600 12px var(--font); border-radius: 999px; padding: 6px 12px; border: 1px solid var(--line); background: var(--white); color: var(--teal); cursor: pointer; }
.fchip:hover { border-color: var(--teal); }
.fchip.is-on { background: var(--teal); color: var(--white); border-color: var(--teal); }
.fsep { width: 1px; height: 20px; background: var(--line); margin: 0 6px; }
.reg-item { border: 1px solid var(--line); border-radius: 12px; padding: 14px 18px 12px; margin-bottom: 10px; background: var(--white); }
.reg-head { display: grid; grid-template-columns: 44px 1fr auto; gap: 12px; align-items: start; }
.reg-id { font-family: var(--font); font-size: 12px; font-weight: 600; color: var(--grey); padding-top: 3px; font-variant-numeric: tabular-nums; }
.reg-q { font-weight: 600; font-size: 14.5px; color: var(--char); line-height: 1.45; margin: 0; }
.reg-meta { display: flex; gap: 6px; flex-shrink: 0; }
.reg-status { font-size: 10.5px; font-weight: 700; letter-spacing: 0.8px; text-transform: uppercase; border-radius: 4px; padding: 3px 8px; white-space: nowrap; }
.st-answered { background: #EAF6E5; color: #2E7D1E; }
.st-partial { background: #FFF2D6; color: #8A5A00; }
.st-open { background: #FDE8E4; color: #A33A1F; }
.st-new { background: var(--cyan-t); color: #007A99; }
.reg-owner { font-size: 10.5px; font-weight: 700; letter-spacing: 0.8px; text-transform: uppercase; border-radius: 4px; padding: 3px 8px; background: var(--fill); color: var(--grey); border: 1px solid var(--line); white-space: nowrap; }
.reg-body { margin: 8px 0 0 56px; font-size: 13.5px; line-height: 1.55; color: #3A4A4D; }
.reg-why b, .reg-prop b { color: var(--teal); font-weight: 700; }
.reg-prop { margin-top: 4px; font-size: 13px; }
.reg-quotes { margin: 10px 0 0; padding: 10px 14px; background: var(--cyan-t); border-left: 3px solid var(--cyan); border-radius: 6px; }
.reg-quotes .ec-head { margin-bottom: 4px; }
.reg-session { font-size: 11px; color: var(--grey); margin-top: 6px; }
.reg-empty { color: var(--grey); font-style: italic; padding: 12px 0; }

/* ── Agenda ────────────────────────────────────────────────────────── */
.agenda { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: 8px; }
.ag-slot { border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; background: var(--white); cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.ag-slot:hover, .ag-slot.is-on { border-color: var(--teal); box-shadow: 0 6px 18px rgba(0,84,95,0.08); }
.ag-slot.is-on { background: var(--tint); }
.ag-time { font-family: var(--font); font-size: 12px; font-weight: 600; color: var(--grey); font-variant-numeric: tabular-nums; }
.ag-site { display: inline-block; margin-left: 8px; font-size: 10.5px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--green); }
.ag-title { font-family: var(--font-disp); font-weight: 700; color: var(--teal); font-size: 17px; margin: 4px 0 6px; }
.ag-body { font-size: 13.5px; color: #3A4A4D; line-height: 1.5; margin: 0; }
.ag-items { font-size: 12px; color: var(--teal); font-weight: 600; margin-top: 8px; }
.attendees { margin-top: 26px; padding: 18px 22px; background: var(--fill); border: 1px solid var(--line); border-radius: 12px; }
.attendees h3 { margin: 0 0 8px; }
.attendees p { font-size: 14px; margin: 0 0 6px; }

/* ── Steps / footer ────────────────────────────────────────────────── */
.steps li { font-size: 14.5px; }
.foot { background: var(--teal); color: #CFE7E2; padding: 34px 0; margin-top: 60px; }
.foot p { margin: 0 0 6px; font-size: 14px; }
.foot strong { color: var(--white); }
.foot .micro { color: #9FCBC3; }

/* ── Responsive ────────────────────────────────────────────────────── */
@media (max-width: 1000px) {
  .facts { grid-template-columns: repeat(3, 1fr); }
  .change-grid, .ws-grid { grid-template-columns: 1fr; }
  .milestones { grid-template-columns: repeat(2, 1fr); }
  .g-row { grid-template-columns: 200px repeat(6, 1fr); }
}
@media (max-width: 860px) {
  .split, .calc-grid, .site-grid, .terms-grid, .agenda, .doc-grid-2 { grid-template-columns: 1fr; }
  .facts { grid-template-columns: repeat(2, 1fr); }
  .plan-viewer { height: 420px; }
  .reg-head { grid-template-columns: 36px 1fr; }
  .reg-meta { grid-column: 2; }
  .reg-body { margin-left: 0; }
  .gantt { overflow-x: auto; }
  .g-row { min-width: 640px; }
}
@media (max-width: 560px) {
  .facts { grid-template-columns: 1fr 1fr; }
  .readout { grid-template-columns: 1fr; }
}

/* ── Presentation mode (present.js) ─────────── */
body.present main > section.slide-on { border-top: none; }

/* ═══════════════════════════════════════════════════════════════════
   15 September additions — people, sites with photographs and plans,
   the Princeton gallery, the team. Ported from the Made client-hub
   pattern and recolored to this hub's teal / green tokens.
   ═══════════════════════════════════════════════════════════════════ */

/* ── The people: two frames directly under the hero ───────────────── */
.people-band { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding-top: 34px; padding-bottom: 6px; }
.pb-fig { margin: 0; }
.pb-fig img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 12px; background: var(--fill); border: 1px solid var(--line); }
.pb-fig figcaption { font-size: 12.5px; color: var(--grey); margin-top: 8px; }
body.present .people-band { display: none; }
@media (max-width: 760px) { .people-band { grid-template-columns: 1fr; padding-top: 24px; } }

/* ── Sites: three cards, photographs left, the case right ─────────── */
.nw { display: grid; gap: 22px; margin-top: 8px; }
.nw-site { background: var(--white); border: 1px solid var(--line); border-radius: 12px; overflow: hidden;
           display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); }
.nw-site > * { min-width: 0; }
.nw-media { position: relative; background: #0f1a1c; min-height: 300px; }
.nw-media > img { width: 100%; height: 100%; object-fit: cover; display: block; aspect-ratio: 4 / 3; cursor: zoom-in; }
.nw-thumbs { position: absolute; left: 12px; bottom: 12px; display: flex; gap: 7px; }
.nw-thumbs button { width: 54px; height: 40px; padding: 0; border: 2px solid rgba(255,255,255,.55); border-radius: 5px;
                    overflow: hidden; cursor: pointer; background: #fff; opacity: .78; }
.nw-thumbs button[aria-pressed=true] { border-color: var(--green); opacity: 1; }
.nw-thumbs img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nw-body { padding: 22px 24px 20px; display: flex; flex-direction: column; gap: 12px; }
.nw-body h3 { margin: 0; font-size: 21px; }
.nw-body ul.clean { margin: 0; }
.nw-body ul.clean li { font-size: 13.5px; }
.nw-where { margin: 0; font-size: 13px; font-weight: 400; color: var(--grey); font-family: var(--font); }
.nw-status { display: inline-block; align-self: flex-start; font-size: 10.5px; font-weight: 700; letter-spacing: 1px;
             text-transform: uppercase; padding: 4px 9px; border-radius: 5px; }
.st-live { background: rgba(67,176,42,.14); color: #2f7d1e; }
.st-comm { background: #FBF1DF; color: #9A6408; }
.st-plan { background: var(--cyan-t); color: var(--teal); }
.nw-facts { display: flex; flex-wrap: wrap; gap: 16px 22px; margin-top: 2px; }
.nw-facts div { min-width: 90px; }
.nw-facts b { display: block; font-family: var(--font-disp); font-size: 21px; color: var(--teal); line-height: 1.1; }
.nw-facts span { font-size: 12px; color: var(--grey); }
.nw-plan { margin: auto 0 0 !important; font-size: 13.5px; }
.nw-plan a { font-weight: 600; color: var(--teal); text-decoration: none; }
.nw-plan a:hover { text-decoration: underline; }
#nw-box { position: fixed; inset: 0; z-index: 12000; background: rgba(6,12,13,.94); display: none;
          align-items: center; justify-content: center; padding: 26px; cursor: zoom-out; }
#nw-box img { max-width: 100%; max-height: 88vh; object-fit: contain; background: #fff; border-radius: 6px; }
#nw-box .cap { position: absolute; bottom: 16px; left: 24px; right: 24px; text-align: center; color: #e6f0f1; font-size: 13px; }
@media (max-width: 900px) { .nw-site { grid-template-columns: 1fr; } .nw-media { min-height: 220px; } }
body.present .nw-site { grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr); }
body.present .nw-body ul.clean li { font-size: 12.5px; }

/* ── Princeton plans, two-up ──────────────────────────────────────── */
.plan-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 8px; }
.plan-pair.plan-single { grid-template-columns: minmax(0, 1fr); max-width: 760px; }
.plan-fig { margin: 0; }
.plan-fig a { display: block; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: #fff; }
.plan-fig img { display: block; width: 100%; aspect-ratio: 16 / 11; object-fit: contain; background: #fff; cursor: zoom-in; }
.plan-fig figcaption { font-size: 12.5px; color: var(--grey); margin-top: 8px; line-height: 1.5; }
.plan-fig figcaption b { color: var(--teal); }
@media (max-width: 800px) { .plan-pair { grid-template-columns: 1fr; } }

/* ── Gallery ──────────────────────────────────────────────────────── */
.gl-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 18px; }
.gl-chip { font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; padding: 6px 14px; border-radius: 999px;
           background: #fff; color: var(--char); border: 1px solid var(--line); transition: background .14s, color .14s, border-color .14s; }
.gl-chip:hover { border-color: var(--green); }
.gl-chip.is-on { background: var(--green); color: #fff; border-color: var(--green); }
.gl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.gl-tile { padding: 0; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--fill);
           cursor: zoom-in; aspect-ratio: 4 / 3; display: block; transition: transform .16s, box-shadow .16s, border-color .16s; }
.gl-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gl-tile:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0,0,0,.14); border-color: var(--green); }
.gl-tile[hidden] { display: none; }
.gl-box { position: fixed; inset: 0; z-index: 12000; background: rgba(6,12,13,.96); display: flex; align-items: center;
          justify-content: center; padding: 3rem 4.5rem; }
.gl-box[hidden] { display: none; }
.gl-box img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 6px; }
.gl-nav, .gl-close { position: absolute; background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.2);
                     color: #fff; cursor: pointer; border-radius: 10px; transition: background .14s; }
.gl-nav { top: 50%; transform: translateY(-50%); width: 46px; height: 62px; font-size: 1.7rem; }
.gl-prev { left: 1rem; } .gl-next { right: 1rem; }
.gl-close { top: 1rem; right: 1rem; width: 40px; height: 40px; font-size: 1.4rem; }
.gl-nav:hover, .gl-close:hover { background: rgba(255,255,255,.22); }
.gl-cap { position: absolute; left: 0; right: 0; bottom: 1rem; display: flex; gap: 1rem; align-items: center;
          justify-content: center; font-size: .82rem; color: rgba(255,255,255,.65); }
.gl-cap span:last-child { font-family: var(--font); font-variant-numeric: tabular-nums; color: rgba(255,255,255,.45); }
@media (max-width: 640px) {
  .gl-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 7px; }
  .gl-box { padding: 3.2rem .8rem 3rem; }
  .gl-nav { width: 38px; height: 52px; font-size: 1.4rem; }
  .gl-prev { left: .35rem; } .gl-next { right: .35rem; }
}

/* ── Team ─────────────────────────────────────────────────────────── */
.team { display: grid; grid-template-columns: repeat(auto-fill, minmax(255px, 1fr)); gap: 14px; margin-top: 8px; }
.member { background: var(--white); border: 1px solid var(--line); border-radius: 12px; padding: 20px 18px 16px;
          display: flex; flex-direction: column; height: 100%; min-width: 0; transition: box-shadow .18s, transform .18s; }
.member:hover { box-shadow: 0 10px 26px rgba(0,0,0,.07); transform: translateY(-2px); }
.member-img { width: 66px; height: 66px; border-radius: 50%; margin-bottom: 12px; border: 2px solid var(--green);
              object-fit: cover; object-position: top center; background: #fff; flex-shrink: 0; }
.member h3 { font-size: 16px; color: var(--char); margin: 0 0 3px; line-height: 1.28; }
.member-title { font-size: 12px; color: var(--green); font-weight: 700; margin-bottom: 9px; line-height: 1.4; }
.member p { font-size: 13.5px; color: #444; line-height: 1.55; margin: 0 0 4px; }
.member p strong { color: var(--char); }
.member-prev { margin-top: auto; padding-top: 10px; border-top: 1px solid var(--line); font-size: 12px; color: var(--grey); line-height: 1.5; }
/* Prior employers: one logo per tile, every tile the same size. Each logo's width is set on the page so that
   wide wordmarks and compact marks carry about the same ink area. */
.prev-logos { list-style: none; margin: 6px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.prev-logos li { aspect-ratio: 5 / 2; display: flex; align-items: center; justify-content: center; min-width: 0;
  background: #fff; border: 1px solid var(--line); border-radius: 6px; }
.prev-logos img { display: block; height: auto; max-width: 86%; max-height: 76%; object-fit: contain; }
.duo-p .member-prev { margin-top: 10px; }
.member-prev span { display: block; font-size: 10px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--green); margin-bottom: 3px; }
.member-contact { margin-top: 9px; padding-top: 8px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 2px; }
.member-contact a { font-size: 12px; color: var(--teal); text-decoration: none; overflow-wrap: anywhere; }
.member-contact a:hover { text-decoration: underline; }
.member > .member-contact:not(.member-prev + .member-contact) { margin-top: auto; }
.member-duo { grid-column: span 2; }
.duo-head { font-size: 10.5px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--green); margin-bottom: 12px; }
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.duo-p { min-width: 0; }
.duo-p .member-contact { border-top: 0; padding-top: 0; margin-top: 6px; }
.duo-note { margin-top: 12px !important; padding-top: 10px; border-top: 1px solid var(--line); font-size: 12.5px !important; color: var(--grey) !important; }
@media (max-width: 640px) { .member-duo { grid-column: span 1; } .duo { grid-template-columns: 1fr; } }

/* ── Agenda, grouped by half-day, with the practical details ───────── */
.ag-group { margin: 22px 0 10px; font-size: 11.5px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: var(--green); }
.ag-group:first-child { margin-top: 8px; }
.ag-slot.ag-lite { background: var(--fill); cursor: default; }
.ag-slot.ag-lite:hover { border-color: var(--line); box-shadow: none; }
.ag-slot.ag-lite .ag-title { font-size: 15px; }

/* ── Nav: two rows ────────────────────────────────────────────────────
   The brand row carries the lockup, the 3D studio, the View menu and
   Present; the eleven story links take a full-width row beneath, ending in
   the Technical reference menu. The menus sit outside the link strip so
   that the strip can scroll on phones without clipping them. */
.nav-inner { flex-wrap: wrap; height: auto; min-height: 64px; padding: 9px 28px 0; gap: 10px 14px; }
.nav-inner .lockup { order: 1; margin-right: auto; }
.nav-studio { order: 2; }
.nav-view { order: 3; }
.nav-present { order: 4; }
.nav-row2 { order: 5; flex: 1 1 100%; display: flex; align-items: center; gap: 18px; min-width: 0;
            padding: 7px 0 6px; border-top: 1px solid var(--line); }
.nav-links { flex: 1 1 auto; min-width: 0; margin-left: 0; flex-wrap: wrap; overflow: visible; gap: 2px 18px; }
.nav-links a { padding: 2px 0; }
main > section, main > .people-band, main > .ref-divider { scroll-margin-top: 48px; }
@media (max-width: 760px) {
  .nav-links { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; -webkit-overflow-scrolling: touch; padding-bottom: 8px; }
  .nav-links::-webkit-scrollbar { display: block; height: 4px; }
  .nav-links::-webkit-scrollbar-thumb { background: var(--line); border-radius: 2px; }
}

/* The 3D studio link and the two menus. */
.nav-studio { font-size: 12.5px; font-weight: 700; color: var(--teal); border: 1px solid var(--aqua); border-radius: 999px;
              padding: 6px 13px; text-decoration: none; white-space: nowrap; }
.nav-studio:hover { background: var(--teal); border-color: var(--teal); color: #fff; }
.nav-drop { position: relative; flex-shrink: 0; }
.nav-drop > summary { list-style: none; cursor: pointer; white-space: nowrap; user-select: none; }
.nav-drop > summary::-webkit-details-marker { display: none; }
.nav-drop > summary::after { content: ''; display: inline-block; width: 6px; height: 6px; margin: 0 1px 3px 7px;
  border-right: 2px solid var(--green); border-bottom: 2px solid var(--green); transform: rotate(45deg); transition: transform .15s; }
.nav-drop[open] > summary::after { transform: translate(0, 3px) rotate(225deg); }
.nav-more > summary { font-size: 12.5px; font-weight: 700; color: var(--teal); padding: 2px 0; }
.nav-more.is-active > summary, .nav-more > summary:hover { color: var(--green); }
.nav-more .nd-short { display: none; }
.nav-view > summary { font: 600 12px/1 var(--font); color: var(--teal); border: 1px solid var(--line); border-radius: 999px; padding: 8px 12px; }
.nav-view > summary:hover, .nav-view[open] > summary { border-color: var(--teal); }
.nav-menu { position: absolute; right: 0; top: calc(100% + 10px); z-index: 950; min-width: 230px; display: grid; gap: 2px;
  padding: 8px; background: var(--white); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 1px 2px rgba(0, 30, 34, .06), 0 16px 36px rgba(0, 40, 46, .16); }
.nav-menu a { display: block; padding: 8px 10px; border-radius: 7px; font-size: 13.5px; font-weight: 600; color: var(--char);
  text-decoration: none; white-space: nowrap; }
.nav-menu a:hover, .nav-menu a.is-active { background: var(--tint); color: var(--teal); }
.nav-menu .nav-menu-ext { margin-top: 4px; padding-top: 10px; border-top: 1px solid var(--line); border-radius: 0 0 7px 7px; color: var(--teal); }
.nav-view .nav-menu { min-width: 0; gap: 6px; }
.nav-view .nav-toggle { width: 100%; text-align: left; margin: 0; }
@media (max-width: 760px) {
  .nav-row2 { gap: 12px; }
  .nav-more .nd-long { display: none; }
  .nav-more .nd-short { display: inline; }
  .nav-studio { display: none; }
}

/* ── Capacity model and process explorer (28 Sep 2026) ──────────────────
   The client-hub pattern: a headline band, a control row and the
   embedded model (#model); a unit-operation grid with a detail panel
   (#process). Brand palette only: teal for Made figures and estimates,
   cyan for the CIT record (the sending site), green for the Made position. */

.sec-head-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.sec-head-row .kicker { margin: 0; }
.pill-link { font-size: 12.5px; font-weight: 700; padding: 6px 14px; border-radius: 999px; background: var(--teal);
             color: #fff; text-decoration: none; white-space: nowrap; }
.pill-link:hover { background: var(--teal-d); }
#model h2 { margin-top: 6px; }

.mband { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 4px 0 14px; }
@media (max-width: 980px) { .mband { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .mband { grid-template-columns: minmax(0, 1fr); } }
.mfig { background: #fff; border: 1px solid var(--line); border-top: 4px solid var(--teal); border-radius: 10px; padding: 14px 16px 12px; min-width: 0; }
.mfig.warn { border-top-color: #EE3C27; }
.mfig .k { color: var(--grey); font-size: 13px; }
.mfig .v { font-family: var(--font-disp); font-size: 42px; line-height: 1; color: var(--teal); margin: 8px 0 6px; font-weight: 700; }
.mfig .n { font-size: 13px; color: #333; line-height: 1.45; }
.mfig.warn .n { color: #B42A18; }

.mctl { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; background: var(--fill); border: 1px solid var(--line);
        border-radius: 10px; padding: 10px 14px; margin-bottom: 14px; }
.mctl .lab { font-size: 11px; font-weight: 700; color: var(--teal); text-transform: uppercase; letter-spacing: 0.08em; }
.mseg { display: inline-flex; border: 1px solid var(--teal); border-radius: 6px; overflow: hidden; }
.mseg button { font: inherit; font-size: 13px; padding: 5px 11px; border: 0; background: #fff; color: var(--teal); cursor: pointer; }
.mseg button + button { border-left: 1px solid var(--line); }
.mseg button.on { background: var(--teal); color: #fff; }
.mchips { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.mchips button, .mreset { font: inherit; font-size: 12px; padding: 3px 10px; border: 1px solid var(--line); border-radius: 999px;
                          background: var(--tint); color: var(--teal); cursor: pointer; }
.mchips button.on { background: var(--teal); border-color: var(--teal); color: #fff; }
.mreset { margin-left: auto; background: #fff; border-color: var(--aqua); }

.model-frame { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: #F4F7F7; }
.model-bar { display: flex; gap: 10px; align-items: center; padding: 8px 14px; background: #fff; border-bottom: 1px solid var(--line);
             font-size: 12.5px; color: var(--grey); }
.model-bar .spacer { flex: 1; }
.model-bar a { font-weight: 700; color: var(--teal); text-decoration: none; }
#model-iframe { display: block; width: 100%; height: 1600px; border: 0; background: #F4F7F7; }

.uop-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 12.5px; color: var(--grey); margin: -6px 0 14px; }
.uop-legend i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; vertical-align: -2px; margin-right: 6px; }
.uop-legend .lg-cit { background: var(--cyan); }
.uop-legend .lg-made { background: var(--green); }
.uop-legend .lg-est { background: var(--teal); }
.uop-legend .lg-ws { background: var(--aqua); }
.uop-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 980px) { .uop-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .uop-grid { grid-template-columns: minmax(0, 1fr); } }
.uop { font: inherit; text-align: left; background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 11px 13px;
       cursor: pointer; display: flex; flex-direction: column; gap: 4px; min-height: 118px; min-width: 0; color: var(--char); }
.uop:hover { border-color: var(--aqua); }
.uop[aria-pressed="true"] { border-color: var(--teal); box-shadow: inset 0 0 0 1px var(--teal); background: var(--tint); }
.uop-top { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--grey); }
.uop-n { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px;
         background: var(--teal); color: #fff; font-weight: 700; font-size: 11.5px; }
.uop-name { font-family: var(--font-disp); color: var(--teal); font-size: 15.5px; line-height: 1.25; }
.uop-clock { font-size: 13px; }
.uop-clock b { color: var(--teal); }
.uop-clock.uop-na { color: var(--grey); font-size: 12.5px; }
.uop-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: auto; padding-top: 4px; }
.uop-chips i { font-style: normal; font-size: 10.5px; font-weight: 700; padding: 1px 7px; border-radius: 999px; }
.uop-chips i.ws { background: var(--aqua); color: var(--teal-d); }
.uop-chips i.smp { background: var(--cyan-t); color: #00607A; }
.uop-detail { margin-top: 14px; border: 1px solid var(--line); border-left: 5px solid var(--teal); border-radius: 12px; background: #fff; padding: 16px 18px; }
.uop-dh { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.uop-dh h3 { margin: 0; font-size: 20px; }
.uop-tag { font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: 999px; background: var(--aqua); color: var(--teal-d); }
.uop-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 0.9fr); gap: 18px; }
@media (max-width: 900px) { .uop-cols { grid-template-columns: minmax(0, 1fr); } }
.uop-col { border-top: 3px solid var(--line); padding-top: 8px; min-width: 0; }
.uop-col.uop-cit { border-top-color: var(--cyan); }
.uop-col.uop-made { border-top-color: var(--green); }
.uop-col.uop-clk { border-top-color: var(--teal); }
.uop-col h4 { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--grey); margin: 0 0 6px; }
.uop-col .uop-h4b { margin-top: 12px; }
.uop-col p { font-size: 14.5px; line-height: 1.5; margin: 0; }
.uop-col ul { margin: 6px 0 0; padding-left: 16px; font-size: 13px; line-height: 1.45; }
.uop-big { font-family: var(--font-disp); font-size: 32px; font-weight: 700; color: var(--teal); line-height: 1; margin: 2px 0 4px; }
.uop-small { font-size: 12.5px; color: var(--grey); }
body.present .uop { min-height: 96px; }

/* Document cards carry the cover page, as on the other client hubs. */
.doc-card .doc-cover { position: relative; flex-shrink: 0; width: 86px; aspect-ratio: 360 / 466; border-radius: 6px; overflow: hidden;
                       background: #EDF2F2; border: 1px solid var(--line); box-shadow: 0 1px 2px rgba(0, 30, 34, .08); transition: transform .15s, box-shadow .15s; }
.doc-card .doc-cover img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.doc-card .doc-cover b { position: absolute; left: 5px; bottom: 5px; font-size: 9.5px; letter-spacing: 0.08em; padding: 1px 5px; border-radius: 3px; background: var(--teal); color: #fff; }
.doc-card:hover .doc-cover { transform: translateY(-2px); box-shadow: 0 2px 4px rgba(0, 30, 34, .12), 0 10px 20px rgba(0, 40, 46, .14); }
/* 3D cleanroom link in the Sites section. */
.studio-link { display: flex; align-items: center; justify-content: space-between; gap: 14px 24px; flex-wrap: wrap;
  margin: 4px 0 22px; padding: 14px 18px; background: var(--fill); border: 1px solid var(--line); border-left: 4px solid var(--aqua); border-radius: 10px; }
.studio-link b { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--teal); margin-bottom: 3px; }
.studio-link span { font-size: 14px; color: #3A4A4D; }

/* ══ Present mode on the 16:9 stage (styles.css) ══════════════════════
   Each slide is a 1200 px canvas zoomed to the frame, so these rules are in
   canvas px (vh and vw are zoomed too). The frame is 675 canvas px tall; a
   slide that is taller scrolls inside it. Detail that is for reading rather
   than presenting is hidden here; the scrolling page keeps all of it. */
body.present > header.hero.slide-on .hero-grid { gap: 56px; }
body.present > header.hero.slide-on .hero-marks { margin-bottom: 30px; }
body.present > header.hero.slide-on .hero-lockup { height: 48px; }
body.present > header.hero.slide-on .hero-lockup-client { height: 40px; }
body.present > header.hero.slide-on .hero-kicker { font-size: 15px; }
body.present > header.hero.slide-on h1 { font-size: 60px; line-height: 1.04; }
body.present > header.hero.slide-on .hero-lede { font-size: 21px; max-width: 560px; }
body.present > header.hero.slide-on .hero-art svg { height: 520px; }
body.present > header.hero.slide-on .hero-tagline { font-size: 24px; }
body.present .slide-on .kicker { font-size: 13px; }
body.present main .slide-on .lede { font-size: 17px; max-width: 940px; margin-bottom: 16px; }
body.present main .slide-on .h3-rule { margin-top: 22px; padding-top: 14px; }
body.present .nav-model, body.present .ka, body.present .sec-more, body.present .reg-hint { display: none !important; }
body.present #visit .agenda { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
body.present #visit .ag-body { font-size: 12.5px; }
body.present #visit .visit-docs, body.present #visit .micro { display: none; }
body.present #visit .visit-facts { margin-bottom: 16px; }
body.present #visit .clean li { font-size: 13.5px; margin-bottom: 7px; }
body.present #start .start-grid { gap: 12px; }
body.present #start .start-tile { padding: 16px 18px; }
body.present #model-iframe { height: 360px !important; }
body.present #model .micro { display: none; }
body.present .gl-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
body.present .gl-tile:nth-child(n+19) { display: none; }
/* Team: four columns of horizontal cards (portrait beside name and title, logos below), so the logo tiles stay
   large enough to read across a room. */
body.present .team { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
body.present .member, body.present .duo-p { display: grid; grid-template-columns: 50px minmax(0, 1fr); column-gap: 12px; align-content: start; }
body.present .member { padding: 12px 14px; }
body.present .member.member-duo { display: block; grid-column: span 2; }
body.present .member-img { grid-row: span 2; width: 50px; height: 50px; margin: 0; }
body.present .member h3 { font-size: 15.5px; margin: 3px 0 2px; align-self: end; }
body.present .member-title { font-size: 12px; margin: 0; line-height: 1.35; }
body.present .member-prev { grid-column: 1 / -1; margin-top: 10px; padding-top: 8px; }
body.present .member-contact { display: none; }
body.present .duo { gap: 18px; }
body.present .duo-head { margin-bottom: 10px; }
body.present .prev-logos { gap: 5px; }
/* Longer sections: detail that is for reading rather than presenting stays on the scrolling page. */
body.present #visit .ag-body { display: none; }
body.present #visit .ag-slot { padding: 12px 14px; }
body.present #separation .fig-wide { max-width: 760px; }
body.present #analytical .split-tight { display: none; }
body.present #sites .studio-link, body.present #sites .nw-thumbs, body.present #sites .nw-plan,
body.present #en-plan, body.present #en-plan ~ * { display: none; }
body.present #sites .nw { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
body.present #sites .nw-site { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; }
body.present #sites .nw-media { min-height: 0; }
body.present #sites .nw-media > img { aspect-ratio: 16 / 9; height: auto; }
body.present #sites .nw-body { padding: 14px 16px 12px; gap: 8px; }
body.present #sites .nw-body ul.clean li { font-size: 12.5px; }
body.present #proposal #terms, body.present #proposal > .pfit > .micro { display: none; }
body.present #openitems .reg-body { display: none; }
body.present #openitems .reg-item { padding: 9px 14px; margin-bottom: 6px; }
body.present #supply .micro, body.present #timeline .micro, body.present #dose .micro { display: none; }
body.present #team .lede, body.present #model .lede, body.present #overview .callout-intro,
body.present #overview .h3-rule + p { display: none; }
body.present #overview .facts { margin-bottom: 18px; }
body.present #next .steps { columns: 2; column-gap: 40px; margin: 0; }
body.present #next .steps li { break-inside: avoid; margin-bottom: 10px; }
body.present #evidence details.refs { display: none; }

/* ══ Key art, the site visit and the summary view (30 Sep 2026) ═══════════
   Brand guide V1.2 key art, as on madescientific.com and the sign-in page:
   biomorphic shapes used large and cropped at the page edge, fully saturated;
   a filled vial; momentum arrows. The shapes are <symbol>s in #ka-defs. */
html, body { overflow-x: clip; }
.ka-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
#detail-toggle[aria-pressed="true"]::before { background: var(--green); }

/* Accents: one cropped shape at the right edge of a few section openings, in the margin outside the text column.
   Wide screens only; never in present mode. */
main > section.wrap, main > .ref-divider { position: relative; }
.ka { display: none; position: absolute; top: 34px; right: calc((100% - 100vw) / 2); z-index: -1; pointer-events: none;
      width: clamp(170px, 13vw, 260px); height: auto; aspect-ratio: 1; transform: translateX(38%); overflow: visible; }
.ka-capsule { aspect-ratio: 1 / 2; width: clamp(90px, 7vw, 140px); transform: translateX(30%) rotate(8deg); }
.ka-arrows { aspect-ratio: 132 / 96; width: clamp(120px, 9vw, 170px); transform: translateX(-30%); opacity: .75; }
.ka-flask { aspect-ratio: 1; width: clamp(120px, 9vw, 180px); transform: translateX(20%) rotate(-8deg); }
.ka-squiggle { aspect-ratio: 320 / 140; width: clamp(220px, 17vw, 320px); transform: translateX(34%); }
@media (min-width: 1400px) { .ka { display: block; } }

/* The two team photographs in biomorphic masks, with a bright-green capsule across the join. */
.people-band { position: relative; }
.people-band .pb-fig img { border: 0; border-radius: 0; background: none; clip-path: url(#ka-mask-a); }
.people-band .pb-fig + .pb-fig img { clip-path: url(#ka-mask-b); }
.people-band::after { content: ''; position: absolute; left: 50%; top: 18%; width: clamp(60px, 7vw, 96px); aspect-ratio: 1 / 3.1;
  border-radius: 999px; background: #97D700; opacity: .9; mix-blend-mode: multiply; transform: translateX(-50%) rotate(16deg); pointer-events: none; }
@media (max-width: 760px) { .people-band::after { display: none; } }

/* Start here: the program on one screen. */
#start { padding-top: 48px; }
.start-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 4px; }
.start-tile { position: relative; display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 18px 44px 20px 20px;
  background: var(--white); border: 1px solid var(--line); border-top: 4px solid var(--green); border-radius: 12px;
  color: var(--char); text-decoration: none; transition: border-color .15s, box-shadow .15s, transform .15s; }
.start-tile:hover { border-color: var(--teal); border-top-color: var(--green); box-shadow: 0 8px 22px rgba(0, 40, 46, .09); transform: translateY(-1px); }
.start-tile::after { content: '\2192'; position: absolute; right: 18px; top: 16px; font-weight: 700; color: var(--green); }
.start-tile[target]::after { content: '\2197'; }
.st-k { font-size: 10.5px; font-weight: 700; letter-spacing: 1.3px; text-transform: uppercase; color: var(--grey); }
.start-tile b { font-family: var(--font-disp); font-size: 20px; line-height: 1.2; color: var(--teal); }
.st-t { font-size: 14px; line-height: 1.5; color: #4A5558; }
@media (max-width: 980px) { .start-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .start-grid { grid-template-columns: minmax(0, 1fr); } }

/* Site visit: four panels behind one tab row. */
.visit-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 22px; }
.visit-tabs .fchip { font-size: 12.5px; padding: 7px 14px; }
.visit-panel[hidden] { display: none !important; }
.visit-facts { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 26px; }
.visit-split { gap: 36px; }
.visit-split h3:first-child, .act-col h3:first-child { margin-top: 0; }
.visit-note { margin: 0 0 16px; }
.visit-docs { display: grid; gap: 12px; }
.act-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px; margin-bottom: 8px; }
.act-col { min-width: 0; border-top: 3px solid var(--green); padding-top: 14px; }
.act-col + .act-col { border-top-color: var(--cyan); }
.act-col h4 { font-family: var(--font); font-size: 11px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--grey); margin: 20px 0 10px; }
.act-col h3 + h4 { margin-top: 10px; }
@media (max-width: 860px) { .act-grid, .visit-split { grid-template-columns: minmax(0, 1fr); } .visit-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* The technical reference opens on a tinted band that runs to both page edges. */
.ref-divider { margin-top: 36px; padding-top: 52px; padding-bottom: 40px; background: var(--fill);
  box-shadow: 0 0 0 100vmax var(--fill); clip-path: inset(0 -100vmax); }
.ref-divider h2 { margin-bottom: 10px; }
.ref-divider .lede { margin-bottom: 0; }
body.present .ref-divider { display: none; }

/* ── Summary view (default): each long section shows its heading, lede and
   key facts, with its detail one click away. "Full detail" in the View menu
   opens every section. Present mode always shows the full slide. .pfit is the
   present-mode canvas, which stays in the page (display: contents) after a
   presentation, so the rules look through it. */
.sec-more { display: none; }
html.summary body:not(.present) section[data-collapsible]:not(.is-open) > :not(.pfit):not(.kicker):not(h2):not(.lede):not(.sum):not(.ka):not(.sec-more):not(.sec-head-row),
html.summary body:not(.present) section[data-collapsible]:not(.is-open) > .pfit > :not(.kicker):not(h2):not(.lede):not(.sum):not(.ka):not(.sec-more):not(.sec-head-row) { display: none !important; }
html.summary body:not(.present) .sec-more { display: inline-flex; align-items: center; gap: 8px; margin: 6px 0 0; padding: 8px 16px;
  font: 700 12.5px/1 var(--font); color: var(--teal); background: var(--white); border: 1px solid var(--aqua); border-radius: 999px; cursor: pointer; }
html.summary body:not(.present) .sec-more:hover { background: var(--teal); border-color: var(--teal); color: #fff; }
.sec-more::after { content: ''; width: 6px; height: 6px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg); }
section.is-open > .sec-more::after, section.is-open > .pfit > .sec-more::after { transform: translateY(2px) rotate(225deg); }
html.summary body:not(.present) section[data-collapsible]:not(.is-open) .lede { margin-bottom: 14px; }
html.summary body:not(.present) section[data-collapsible]:not(.is-open) .sum { margin-bottom: 16px; }

/* Register: in the summary view each item opens to its detail. */
.reg-hint { display: none; }
html.summary body:not(.present) .reg-hint { display: block; margin: -6px 0 14px; }
html.summary body:not(.present) #openitems .reg-item:not(.is-open) .reg-body { display: none; }
html.summary body:not(.present) #openitems .reg-head { cursor: pointer; }
html.summary body:not(.present) #openitems .reg-head:focus-visible { outline: 3px solid var(--aqua); outline-offset: 2px; border-radius: 6px; }

/* Footer: the tagline, with a cropped green shape and momentum arrows. */
.foot { position: relative; overflow: hidden; }
.foot > .wrap { position: relative; z-index: 1; }
.foot-tagline { font-family: var(--font-disp); font-weight: 700; font-size: 21px; letter-spacing: -0.01em; color: var(--white); margin: 0 0 14px !important; }
.foot-tagline b { color: #97D700; }
.foot-art { position: absolute; right: 0; bottom: 0; width: clamp(180px, 16vw, 280px); height: auto; transform: translate(34%, 36%); opacity: .95; pointer-events: none; }
.foot-arrows { position: absolute; right: clamp(150px, 14vw, 250px); top: 26px; width: 110px; height: auto; opacity: .55; pointer-events: none; }
@media (max-width: 900px) { .foot-arrows { display: none; } .foot-art { width: 150px; transform: translate(45%, 45%); } }

/* Arrows: Funnel has no arrow glyphs, so links carry a small drawn arrow in the text color rather than a
   system-font arrow that breaks the type. */
.ic { display: inline-block; width: .85em; height: .85em; margin-left: .3em; vertical-align: -0.07em; background-color: currentColor;
      -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat; }
.ic-solo { margin: 0; vertical-align: -0.12em; }
.ic-r  { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 8h11M9 3.5 13.5 8 9 12.5'/%3E%3C/svg%3E"); }
.ic-l  { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13.5 8h-11M7 3.5 2.5 8 7 12.5'/%3E%3C/svg%3E"); margin: 0 .35em 0 0; }
.ic-d  { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 2.5v11M3.5 9 8 13.5 12.5 9'/%3E%3C/svg%3E"); }
.ic-ne { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 11.5l7-7M5.5 4.5h6v6'/%3E%3C/svg%3E"); }

/* Running text in Funnel Sans Light, as the brand guide and madescientific.com set body copy. Supporting text
   under about 14 px (tables, captions, notes, labels) stays Regular so it holds up at small sizes. */
main p, main .clean li, .lede, .hero-lede, .st-t, .foot p { font-weight: 300; }
main p.micro, .foot p.micro { font-weight: 400; }

/* Text links in brand teal, not the browser's default blue; styled links (buttons, cards, tiles) keep their own. */
main a:not([class]) { color: var(--teal); text-decoration-color: rgba(0, 84, 95, .35); text-underline-offset: 2px; }
main a:not([class]):hover { color: var(--green); text-decoration-color: currentColor; }
/* The separation diagram is inline so it sets in Funnel Sans rather than whatever sans the viewer has. */
#pfd-svg { display: block; width: 100%; height: auto; font-family: var(--font); }

/* ── Phones and touch screens (iPhone review in Mobile Safari, 30 Sep 2026) ─────────────────────────────── */
@media (max-width: 760px) {
  /* The link strip scrolls sideways: its right edge fades while there is more to see, and each link is a
     finger-sized target. site.js keeps the current section's link in view. */
  .nav-row2 { padding: 0; }
  .nav-links { padding-bottom: 0; -webkit-mask-image: linear-gradient(to right, #000 80%, transparent); mask-image: linear-gradient(to right, #000 80%, transparent); }
  .nav-links.at-end { -webkit-mask-image: none; mask-image: none; }
  .nav-links a { padding: 11px 0 10px; }
  .milestones { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .fsep { display: none; }
  /* The separation diagram keeps a legible size and scrolls sideways inside its frame. */
  #pfd-svg { min-width: 640px; }
}
@media (pointer: coarse) {
  .fchip { padding: 9px 14px; }
  .plan-tools button { min-width: 40px; min-height: 40px; }
  html.summary body:not(.present) .sec-more { padding: 11px 18px; }
}
/* A short cue above anything that scrolls sideways, present only while it overflows (site.js). */
main p.swipe-hint { display: flex; align-items: center; gap: 2px; margin: 8px 0 2px; font-size: 12px; font-weight: 400; color: var(--grey); }
body.present .swipe-hint { display: none !important; }