@font-face { font-family: Sora; src: url("fonts/sora-light.ttf") format("truetype"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: Archivo; src: url("fonts/archivo-latin.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Instrument Serif"; src: url("fonts/instrument-serif-italic-latin.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: Inter; src: url("fonts/inter-light.woff2") format("woff2"); font-weight: 200; font-style: normal; font-display: swap; }
@font-face { font-family: Tinos; src: url("fonts/tinos-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: Tinos; src: url("fonts/tinos-regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("fonts/ibm-plex-mono.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
:root {
  color-scheme: dark;
  --canvas: #080a0a;
  --ink: #efeee9;
  --muted: #a7aaa8;
  --serif: "Times New Roman", Tinos, serif;
  --sans: Arial, Helvetica, sans-serif;
  --mono: "IBM Plex Mono", monospace;
  /* Preserve the reference proportions without enlarging the interface on wide screens. */
  --u: min(.0920810313vw, 1px);
  --gutter: clamp(28px, 4.97vw, 96px);
  --glass: radial-gradient(ellipse at 12% 0%, #f3f8ff24, transparent 68%), linear-gradient(145deg, #e9f3ff1f, #aac8e20a 55%, #dceeff13);
  --glass-border: #e5eff445;
}
* { box-sizing: border-box; }
html { background: #000; overscroll-behavior-y: none; scrollbar-gutter: stable; }
body { margin: 0; background: #000; overscroll-behavior-y: none; color: var(--ink); font-family: var(--serif); -webkit-font-smoothing: antialiased; }
body.has-dialog { overflow: hidden; }
button, input { font: inherit; }
button, a, summary { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
button { color: inherit; cursor: pointer; appearance: none; }
button, input { border-radius: 0; }
button:focus-visible, a:focus-visible, summary:focus-visible, input:focus-visible { outline: 2px solid #dce8ec; outline-offset: 5px; }
svg { flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1; }
::selection { color: var(--canvas); background: var(--ink); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip-link { position: fixed; z-index: 50; top: 12px; left: 12px; padding: 12px 18px; color: var(--canvas); background: var(--ink); transform: translateY(-160%); }
.skip-link:focus { transform: translateY(0); }
.hero { isolation: isolate; position: relative; min-height: 100svh; height: calc(857 * var(--u)); overflow: clip; background: var(--canvas); border-bottom: 1px solid #343938; }
.hero__world { position: absolute; inset: 0; z-index: -2; isolation: isolate; transform-origin: 0 0; }
.hero__void { position: absolute; inset: 0; z-index: 20; background: #000; opacity: 0; pointer-events: none; }
.hero__scene { position: absolute; z-index: -2; inset: -20px -12px 0 0; overflow: hidden; transform: translate3d(var(--hero-x, 0px), var(--hero-y, 0px), 0) scale(var(--hero-scale, 1)); transform-origin: right center; }
.hero[data-motion="running"] .hero__scene { will-change: transform; }
.hero__art { position: absolute; inset: 0; overflow: hidden; container-type: size; }
.hero__particles { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none; }
/* The source retains the mockup's full canvas. Only its top 857px form the hero;
   size that region to cover the container, and clip the unused lower artwork. */
.hero__art img, .hero__depth { position: absolute; top: 0; left: 100%; transform: translateX(-100%); display: block; width: max(100cqw, calc(100cqh * 1086 / 857)); height: auto; max-width: none; }
.bar { position: fixed; inset: 0 0 auto; pointer-events: none; z-index: 30; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; row-gap: 21px; padding: 25px var(--gutter) 0; }
.bar > * { pointer-events: auto; }
/* when the home page scrolls as a plain page (reduced motion, or no depth layer for the helmet journey), the header
   lays a soft dark ground behind itself once the page has moved, so the hero's words never pass under the logo and the
   search field (hero-scroll.js sets html.is-scrolled) */
body:has(.hero-journey:not(.is-active)) .bar::after { content: ""; position: absolute; inset: 0 0 -44px; z-index: -1; pointer-events: none; opacity: 0; background: linear-gradient(180deg, rgba(5, 7, 9, .985) 0%, rgba(5, 7, 9, .975) 58%, rgba(5, 7, 9, 0) 100%); }
html.is-scrolled body:has(.hero-journey:not(.is-active)) .bar::after { opacity: 1; }
.bar__mark { display: block; grid-column: 1; grid-row: 1; width: 158.4px; line-height: 0; }
.bar__mark img { width: 100%; height: auto; }
.bar__search { grid-column: 2; grid-row: 1; }
.bar__actions { display: flex; grid-column: 3; grid-row: 1; justify-self: end; align-items: center; gap: 16px; margin: 0; }
.search-trigger, .briefing-link, .system-link, .path-link {
  border: 1px solid #ffffff24;
  border-radius: 999px;
  background: #ffffff0f;
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
  box-shadow: inset 0 1px 0 #ffffff14;
  font-family: "Helvetica Neue", var(--sans);
  transition: background-color 160ms ease, border-color 160ms ease;
}
.search-trigger { display: flex; grid-column: 2; grid-row: 1; align-items: center; gap: .6rem; width: min(352px, 34vw); height: 40px; padding: 0 .6rem 0 .9rem; color: #f2eee780; font-size: 14.4px; line-height: 1; letter-spacing: -.006em; text-align: left; }
/* Restore the original search pill's translucent fill and soft edge lighting. */
.search-trigger {
  border-color: #ffffff21;
  background: linear-gradient(180deg, #ffffff17, #ffffff0d);
  box-shadow: inset 0 1px 0 #ffffff24, 0 1px 2px #03050a47, 0 10px 28px -14px #03050a99;
  transition: border-color 160ms ease, background-color 160ms ease;
}
.search-trigger[aria-expanded="true"] { opacity: 0; }
/* (the ring comes in, rather than switching on: after a close by Escape, focus lands on the pill as the glass does) */
.search-trigger:focus-visible { outline: 2px solid #f2f0eacc; outline-offset: 3px; animation: search-ring-in .18s cubic-bezier(.2, .7, .3, 1); }
@keyframes search-ring-in { from { outline-color: transparent; } }
.is-light .search-trigger:focus-visible { outline-color: #0d1117b3; }
.search-trigger kbd, .site-search .search-kbd { padding: .22em .5em; border: 1px solid #ffffff1f; border-radius: 6px; background: #ffffff0d; color: #f2eee78c; font: 10.88px/1 var(--mono); letter-spacing: .02em; }
.search-trigger kbd { margin-left: auto; }
.search-trigger svg { width: 16px; height: 16px; color: #f2eee79e; stroke-width: 1.1; }
.search-trigger:hover { border-color: #ffffff33; }
.briefing-link:hover, .system-link:hover, .path-link:hover { border-color: #ffffff3d; background-color: #ffffff1a; }
.briefing-link { display: flex; justify-content: center; align-items: center; height: 36px; min-width: 128px; padding: 0 .95rem; color: #f2eee7; font-size: 13.6px; line-height: 1; white-space: nowrap; }
.menu-trigger { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; width: 44px; height: 40px; padding: 0; color: #f2eee7; border: 0; border-radius: 0; background: transparent; box-shadow: none; cursor: pointer; }
.menu-trigger span { display: block; width: 17px; height: 1px; border-radius: 1px; background: currentColor; }
.menu-trigger:focus-visible { outline: 2px solid #87c8e7; outline-offset: 3px; }
.hero__copy { position: absolute; z-index: 1; top: calc(156 * var(--u)); left: var(--gutter); }
.hero__eyebrow { display: flex; align-items: center; gap: calc(17 * var(--u)); width: calc(403 * var(--u)); margin: 0 0 calc(49 * var(--u)); color: #b2b6b3; font: calc(7.2 * var(--u))/1.4 var(--mono); text-transform: uppercase; letter-spacing: calc(3.5 * var(--u)); white-space: nowrap; }
.hero__eyebrow::after {
  content: ""; height: 1px; flex: 1; background: #949994;
  transform-origin: left center;
  animation: hero-eyebrow-rule-reveal 1450ms cubic-bezier(.42, 0, .2, 1) 450ms both;
}
.hero__copy.is-preparing .hero__eyebrow::after { animation: none; transform: scaleX(0); }
@keyframes hero-eyebrow-rule-reveal {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}
.hero__title { position: relative; margin: 0; padding-left: calc(36 * var(--u)); font-weight: 400; }
.hero__title::before {
  content: ""; position: absolute; left: 0; top: calc(1 * var(--u));
  width: max(1px, calc(1.5 * var(--u))); height: calc(248.6 * var(--u));
  background: linear-gradient(180deg, #e8232e 0%, #e8232e 30%, #78c4e2 65%, #207db3 100%);
  background-size: 100% 280%; background-position: 50% 0%;
  box-shadow: 0 0 5px #e8232e55, 0 0 13px #e8232e22;
  transform-origin: 50% 0;
  animation: hero-rule-reveal 1450ms cubic-bezier(.42, 0, .2, 1) 450ms both,
    hero-rule-color 4.5s ease-in-out 1900ms infinite alternate;
}
.hero__copy.is-preparing .hero__title::before { animation: none; transform: scaleY(0); }
@keyframes hero-rule-reveal {
  from { transform: scaleY(0); }
  to { transform: scaleY(1); }
}
@keyframes hero-rule-color {
  from { background-position: 50% 0%; box-shadow: 0 0 5px #e8232e55, 0 0 13px #e8232e22; }
  to { background-position: 50% 100%; box-shadow: 0 0 6px #78c4e266, 0 0 15px #207db333; }
}
@media (prefers-reduced-motion: reduce) {
  .hero__title::before, .hero__eyebrow::after { animation: none; transform: none; background-position: 50% 50%; }
}
.hero__title-sans { display: block; position: relative; top: calc(-6 * var(--u)); font-family: "Helvetica Neue", Inter, var(--sans); font-size: calc(140.8 * var(--u)); font-weight: 200; line-height: 1; letter-spacing: 0; }
.hero__title em { display: block; position: relative; top: calc(-10 * var(--u)); margin-top: calc(-1 * var(--u)); font: italic 400 calc(118.8 * var(--u))/1.02 "Instrument Serif", var(--serif); letter-spacing: 0; white-space: nowrap; }
/* The original text holds its exact typography while temporary, measured
   glyphs animate together across both lines. They are removed after entrance. */
.hero__title-sans, .hero__title em, .hero__description-line { display: flow-root; }
.hero__reveal { position: relative; display: block; width: max-content; padding: .16em; margin: -.16em; }
.hero__copy.is-preparing .hero__reveal, .hero__copy.is-preparing .hero__eyebrow > span, .hero__copy.is-preparing .hero__actions, .search-trigger.is-intro-preparing { opacity: 0; }
.hero__copy.is-entering .hero__reveal, .hero__copy.is-entering .hero__eyebrow > span { color: transparent; }
.hero__eyebrow > span { position: relative; display: inline-block; }
.hero-journey.is-active .hero__copy.is-exiting { opacity: 1; transform: none; }
.hero__copy.is-exiting .hero__title::before,
.hero__copy.is-exiting .hero__eyebrow::after { opacity: var(--exit-rule-opacity, 1); }

.hero__glyph { position: absolute; display: block; color: var(--ink); white-space: pre; pointer-events: none; transform-origin: left center; will-change: transform, opacity, filter; }
.hero__exit-canvas { position: absolute; pointer-events: none; }
.hero__exit-canvas[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) {
  .hero__copy.is-preparing .hero__reveal, .hero__copy.is-preparing .hero__eyebrow > span, .hero__copy.is-preparing .hero__actions, .search-trigger.is-intro-preparing { opacity: 1; }
  .hero__copy.is-entering .hero__reveal, .hero__copy.is-entering .hero__eyebrow > span { color: inherit; }
  .hero__glyph { display: none; }
}
.hero__description { margin: calc(15 * var(--u)) 0 0; font: 400 calc(20 * var(--u))/1.45 Archivo, var(--sans); letter-spacing: -.015em; color: #d5d9dbe8; }
.hero__actions { display: flex; align-items: center; gap: calc(24 * var(--u)); margin-top: calc(30 * var(--u)); }
.system-link, .path-link { display: inline-flex; align-items: center; justify-content: space-between; white-space: nowrap; }
.system-link { height: 42px; width: 200px; padding: 0 18px; color: var(--ink); font-size: 14.4px; }
.hero__actions svg { width: calc(16 * var(--u)); height: calc(14 * var(--u)); }
.path-link { gap: 12px; height: 42px; padding: 0 18px; font-size: 14px; color: #f2eee7; }
.hero__principles { position: absolute; z-index: 1; bottom: calc(48 * var(--u)); display: flex; flex-direction: column; gap: calc(8 * var(--u)); color: #a2a6a3; font: calc(7 * var(--u))/1.6 var(--mono); letter-spacing: calc(3 * var(--u)); text-transform: uppercase; }
.hero__principles { right: calc(40 * var(--u)); bottom: calc(39 * var(--u)); text-align: right; color: #919794; }
.hero__principles::after { content: ""; align-self: flex-end; width: calc(26 * var(--u)); height: 1px; margin-top: calc(2 * var(--u)); background: #727973; }
/* the company's line, in the hero's bottom left corner, on the copy's left edge. It comes in after the copy's intro (and
   shows anyway if the intro never runs, as the copy does), and steps back with the hero's other chrome on scroll */
.hero__legal { position: absolute; z-index: 1; left: var(--gutter); bottom: 28px; margin: 0; font: 400 13px/1.4 Archivo, var(--sans); letter-spacing: -.005em; color: #8f9391; }
.hero__legal a { margin-left: 22px; color: inherit; text-decoration: none; transition: color .2s; }
.hero__legal a:hover { color: #eeede8; }
.hero:has(.hero__copy.is-preparing) .hero__legal { opacity: 0; animation: hero-legal-show 0s 6s forwards; }
.hero:has(.hero__copy.is-entering) .hero__legal { animation: hero-legal-in 1s cubic-bezier(.16, 1, .3, 1) 1.9s both; }
html.is-arrived .hero:has(.hero__copy.is-preparing) .hero__legal { opacity: 1; animation: none; }
@keyframes hero-legal-in { from { opacity: 0; } }
@keyframes hero-legal-show { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .hero:has(.hero__copy.is-preparing) .hero__legal { opacity: 1; animation: none; } }
/* The search glass opening out of the pill (site.js). Three numbers carry it, each 0 at the pill and 1 at the panel:
   --sg-v its drop (on a phone the panel sits below the pill), --sg-p its stretch to the panel's width (the field's
   place and size, the corners, the smoke, the key hint and the close button go with it), --sg-q its fall to the
   panel's height (the suggestions come in with it). site.js sets where the pill is (--sg-*0) and moves the three
   numbers; everything here follows them in the same frame.
   At 0 the glass is optically the pill, not just its shape: its blur, its smoke under its sheen, its edge and drop
   shadow, its word and key hint (site.js reads them off the pill into --sg-*0). The clip limits what the blur samples to
   the pill's own area, so at the end of a close the pill takes over in one frame with nothing to change */
@property --sg-v { syntax: '<number>'; inherits: true; initial-value: 1; }
@property --sg-p { syntax: '<number>'; inherits: true; initial-value: 1; }
@property --sg-q { syntax: '<number>'; inherits: true; initial-value: 1; }
/* One glass surface opens out of the search pill, and the hero stays visible. Plain glass: the page behind it, blurred
   and a little richer, under a neutral smoke that keeps the words clear, with the pill's own sheen and hairline edge.
   It has no colour of its own, so it takes the colour of whatever is behind it. The opening is in site.js */
.site-search {
  --search-top: 25px;
  position: fixed; inset: var(--search-top) 0 auto;
  width: min(580px, calc(100% - 24px));
  max-height: calc(100dvh - var(--search-top) - 16px);
  margin: 0 auto; padding: 0; overflow: hidden;
  border: 0; border-radius: 28px;
  /* the panel's sheen, under the smoke (.search-glass); it hands over to the pill's (.search-glass::before) as the glass
     narrows. (Setting it also keeps out the UA's dialog background, Canvas, which would fill the glass) */
  background: linear-gradient(180deg, rgb(255 255 255 / calc(.0902 * var(--sg-p, 1))), rgb(255 255 255 / calc(.0392 * var(--sg-p, 1))) 34%, rgb(255 255 255 / calc(.0235 * var(--sg-p, 1))));
  /* the panel's frost, and the pill's at the pill (--sg-blur0, --sg-sat0). The header is a backdrop root (it carries a
     view-transition-name), so the pill's own backdrop-filter sees nothing and the pill shows the page as it is: the
     frost clears as the panel folds up into the strip it closes through (--sg-q), and comes on as it falls open */
  -webkit-backdrop-filter: blur(calc(var(--sg-blur0, 28px) + (28px - var(--sg-blur0, 28px)) * var(--sg-q, 1))) saturate(calc(var(--sg-sat0, 1.4) + (1.4 - var(--sg-sat0, 1.4)) * var(--sg-q, 1)));
  backdrop-filter: blur(calc(var(--sg-blur0, 28px) + (28px - var(--sg-blur0, 28px)) * var(--sg-q, 1))) saturate(calc(var(--sg-sat0, 1.4) + (1.4 - var(--sg-sat0, 1.4)) * var(--sg-q, 1)));
  /* the clip is the glass's shape, and what the frost samples. Once the frost has gone (the strip, --sg-q 0) it stands a
     pixel clear of the shape, so the visible edge is the smoke's and the rim's, drawn as the pill draws its own (--sg-o) */
  --sg-o: calc(clamp(0, 1 - var(--sg-q, 1) * 50, 1) * 1px);
  clip-path: inset(calc(0px - var(--sg-o)) calc(var(--sg-r0, 0px) * (1 - var(--sg-p)) - var(--sg-o)) calc(var(--sg-b0, 0px) * (1 - var(--sg-q)) - var(--sg-o)) calc(var(--sg-l0, 0px) * (1 - var(--sg-p)) - var(--sg-o)) round calc(var(--sg-rad0, 28px) + (28px - var(--sg-rad0, 28px)) * var(--sg-p) + var(--sg-o)));
  translate: 0 calc(var(--sg-y0, 0px) * (1 - var(--sg-v)));
  /* as see-through as the pill at the pill (the home page fades its header as it scrolls) */
  opacity: calc(1 - (1 - var(--nav-opacity, 1)) * (1 - var(--sg-p, 1)));
  color: var(--ink);
}
.site-search[open] { display: flex; flex-direction: column; }
.site-search::backdrop { background: #0405064d; }
.site-search[open]::backdrop { animation: search-dim .3s cubic-bezier(.22, 1, .36, 1) both; }
@keyframes search-dim { from { background: #04050600; } }
/* the strip a classic scrollbar leaves (scrollbar-gutter: stable) dims with the page under the search, and comes back with it */
html:has(body.has-dialog:not(.is-search-closing)) { background: #06080a; transition-duration: .24s; }
html.is-light:has(body.has-dialog:not(.is-search-closing)) { background: rgb(176, 180, 183); }
html:has(body.is-search-closing) { transition-duration: .24s; }
/* the smoke, on the glass's shape (a flat colour, as the pill's is): from the pill's own (none on the home page and on
   light pages, the smoked pill's on dark section pages) to the panel's */
.search-glass { position: absolute; inset: 0 calc(var(--sg-r0, 0px) * (1 - var(--sg-p, 1))) calc(var(--sg-b0, 0px) * (1 - var(--sg-q, 1))) calc(var(--sg-l0, 0px) * (1 - var(--sg-p, 1))); border-radius: calc(var(--sg-rad0, 28px) + (28px - var(--sg-rad0, 28px)) * var(--sg-p, 1)); overflow: hidden; pointer-events: none;
  background-color: color-mix(in srgb, rgb(10 11 13 / .44) calc(var(--sg-p, 1) * 100%), var(--sg-smoke0, rgb(10 11 13 / .44))); }
/* the pill's sheen over that smoke, laid out as the pill lays it out (inside a 1px edge, repeating under it): it comes in
   as the glass narrows and is the pill's own when it lands */
.search-glass::before { content: ""; position: absolute; inset: 0; border: 1px solid transparent; border-radius: inherit; background: var(--sg-sheen0, none); opacity: calc(1 - var(--sg-p, 1)); }
/* a soft light along the panel's top, which the pill does not have */
.search-glass::after { content: ""; position: absolute; inset: 0; background: radial-gradient(130% 60% at 50% 0%, #ffffff0f, transparent 70%); opacity: var(--sg-p, 1); }
.search-glass__refraction { display: none; }
/* the edge: one hairline, a little brighter along the top, that follows the glass while it opens out of the pill; at the
   pill it is the pill's border and the pill's inner top light */
.search-rim { position: absolute; z-index: 2; inset: 0 calc(var(--sg-r0, 0px) * (1 - var(--sg-p))) calc(var(--sg-b0, 0px) * (1 - var(--sg-q))) calc(var(--sg-l0, 0px) * (1 - var(--sg-p))); border-radius: calc(var(--sg-rad0, 28px) + (28px - var(--sg-rad0, 28px)) * var(--sg-p)); pointer-events: none;
  border: 1px solid color-mix(in srgb, #ffffff21 calc(var(--sg-p, 1) * 100%), var(--sg-bc0, #ffffff21));
  border-top-color: color-mix(in srgb, rgb(255 255 255 / .218) calc(var(--sg-p, 1) * 100%), var(--sg-btc0, #ffffff21));
  box-shadow: inset 0 1px 0 color-mix(in srgb, transparent calc(var(--sg-p, 1) * 100%), var(--sg-hl0, transparent)); }
/* the pill's key hint rides the glass's right edge and fades as it stretches (and comes back as it closes), in the
   pill's own colours */
.site-search .search-kbd { position: absolute; z-index: 2; left: var(--sg-kx, 0px); top: var(--sg-ky, 0px); margin: 0; pointer-events: none; opacity: calc(1 - var(--sg-p) * 2.5); transform: translateX(calc(var(--sg-r0, 0px) * var(--sg-p))); color: var(--sg-kc0, #f2eee78c); border-color: var(--sg-kbc0, #ffffff1f); background: var(--sg-kbg0, #ffffff0d); }
/* the pill's drop shadow: the glass is clipped to its own shape and cannot cast it, so it comes in under the pill's place
   as the glass lands (site.js runs it with the narrowing) and the pill's own takes over with the pill */
.bar__search { position: relative; }
.bar__search::after { content: ""; position: absolute; inset: 0; border-radius: 999px; pointer-events: none; box-shadow: var(--sg-shadow0, none); opacity: 0; }
.search-panel { position: relative; z-index: 1; display: flex; flex-direction: column; min-height: 0; }
/* the field is the pill at its own size: the same icon, gap and type, scaled from the pill's 14.4px to 16px, so as the
   panel opens out of the pill its word and icon carry straight on */
.search-field { display: flex; align-items: center; flex-shrink: 0; gap: 10.7px; min-height: 68px; margin: 0 22px; border-bottom: 1px solid #ffffff1a;
  transform-origin: var(--sg-fo, 0 50%); transform: translate(calc(var(--sg-fx0, 0px) * (1 - var(--sg-p))), calc(var(--sg-fy0, 0px) * (1 - var(--sg-p)))) scale(calc(var(--sg-fs0, 1) + (1 - var(--sg-fs0, 1)) * var(--sg-p))); }
/* Near the pill the field's icon and word give way to the pill's own (.search-face), which ride with them: the field is
   scaled type and lands up to a device pixel off the pill's, the copies are the pill's type and land on it exactly. They
   change places at --sg-p .25, in the middle of the motion, where the two are drawn alike (the field's colours and
   stroke are the pill's there, --sg-r) */
.site-search { --sg-r: clamp(0, (var(--sg-p, 1) - .25) / .75, 1); }
.search-field > svg { width: 17.8px; height: 17.8px; stroke-width: calc(1.1 + .12 * var(--sg-r)); color: color-mix(in srgb, #f2eee79e calc(var(--sg-r) * 100%), var(--sg-ic0, #f2eee79e)); opacity: clamp(0, (var(--sg-p, 1) - .25) * 1000, 1); }
#site-query { width: 100%; min-width: 0; height: 48px; padding: 0; border: 0; outline: none; background: transparent; color: color-mix(in srgb, #f4f3f0 calc(var(--sg-r) * 100%), var(--sg-wc0, #f4f3f0)); font: 16px/1.4 "Helvetica Neue", var(--sans); letter-spacing: -.006em; opacity: clamp(0, (var(--sg-p, 1) - .25) * 1000, 1); }
#site-query::placeholder { color: color-mix(in srgb, #f2eee780 calc(var(--sg-r) * 100%), var(--sg-wc0, #f2eee780)); opacity: 1; }
/* the pill has no caret, so the field drops it while it closes */
.site-search.is-closing #site-query { caret-color: transparent; }
/* the copies of the pill's icon and word (site.js places them on the pill's own): they move as the field moves, scaled
   about the start of the word, and stand still and unscaled, as the pill draws them, at the pill */
.search-face { position: absolute; z-index: 2; inset: 0; pointer-events: none; transform-origin: var(--sg-wo, 0 0);
  transform: translate(calc(var(--sg-fx0, 0px) * -1 * var(--sg-p, 1)), calc(var(--sg-fy0, 0px) * -1 * var(--sg-p, 1))) scale(calc((var(--sg-fs0, 1) + (1 - var(--sg-fs0, 1)) * var(--sg-p, 1)) / var(--sg-fs0, 1))); }
.search-face > * { position: absolute; margin: 0; opacity: clamp(0, (.25 - var(--sg-p, 1)) * 1000, 1); }
#site-query::-webkit-search-decoration, #site-query::-webkit-search-cancel-button { -webkit-appearance: none; }
.search-field:focus-within { border-bottom-color: #ffffff33; }
.search-close { display: grid; place-items: center; flex: 0 0 32px; width: 32px; height: 32px; padding: 0; border: 1px solid #ffffff1f; border-radius: 50%; background: #ffffff0a; color: #d6d4cf; opacity: calc(var(--sg-p) * 6 - 4.8); }
.search-close svg { width: 18px; height: 18px; stroke-width: 1.3; }
.search-close:hover { color: #fff; background: #ffffff17; }
.search-close:focus-visible { outline-offset: 2px; }
.search-content { opacity: calc(var(--sg-q) * 2.2 - .3); min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 10px 12px; scrollbar-width: thin; scrollbar-color: #ffffff3a transparent; position: relative; }
.search-status { margin: 18px 14px 8px; color: #c6c4bf; font: italic 15px/1.4 "Instrument Serif", var(--serif, serif); letter-spacing: 0; }
.search-results { position: relative; z-index: 1; list-style: none; padding: 0; margin: 0; overflow: hidden; }
.search-glide { position: absolute; left: 10px; right: 10px; top: 0; z-index: 0; border-radius: 13px; background: linear-gradient(120deg, #ffffff1c, #ffffff0a); box-shadow: inset 0 0 0 1px #ffffff1f; opacity: 0; pointer-events: none; transition: transform .32s cubic-bezier(.22,1,.36,1), height .32s cubic-bezier(.22,1,.36,1), opacity .2s ease; }
.search-result { display: flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 47px; padding: 11px 14px; border: 1px solid transparent; border-radius: 13px; font: 13px/1.45 var(--sans); color: #eeede9; }
.search-result-title { min-width: 0; }
.search-result-category { flex-shrink: 0; max-width: 38%; text-align: right; font: 10px/1.4 var(--sans); color: #cbc9c4; }
.search-result { transition: color .2s ease, transform .3s cubic-bezier(.22,1,.36,1); }
/* the glide behind the rows is the one mark of where the pointer or the keyboard is; it rings brighter for the keyboard */
.search-result:hover, .search-result:focus-visible { outline: none; color: #fff; }
.search-glide.is-focus { box-shadow: inset 0 0 0 1px #ffffff7a; }
.search-empty { margin: 0; padding: 15px 14px 24px; font: 13px/1.6 var(--sans); color: #d3d1cc; }
.search-panel__footer { opacity: calc(var(--sg-q) * 2.2 - .3); display: flex; align-items: center; justify-content: flex-end; flex-shrink: 0; gap: 16px; min-height: 46px; padding: 10px 24px; border-top: 1px solid #ffffff14; color: #bfbdb8; font: 10px/1.4 var(--sans); }
.search-panel__keys { display: flex; gap: 16px; color: #b8b6b1; }
.search-panel__keys > span { display: flex; align-items: center; gap: 4px; }
.search-panel__keys kbd { display: inline-block; font: 10px/1.4 var(--sans); color: #d6d4cf; }
@media (hover: none) { .search-panel__footer { display: none; } }
/* Short, wide viewports preserve the full hero in a single screen. */
@media (min-aspect-ratio: 16/10) and (min-width: 1024px) {
  .hero { height: 100svh; min-height: 620px; }
  .hero__art img, .hero__depth { top: min(0px, calc((100cqh - 100cqw * 857 / 1086) * .42)); }
  .hero__art::after { content: ""; position: absolute; inset: 65% 0 0 65%; background: linear-gradient(0deg, #030605a0, transparent); }
  .hero__copy { top: 18.2%; }
  .hero__title-sans { font-size: min(calc(140.8 * var(--u)), 18.15svh); }
  .hero__title em { font-size: min(calc(118.8 * var(--u)), 15.29svh); }
  .hero__title::before { height: min(calc(248.6 * var(--u)), 32.01svh); }
  .hero__eyebrow { margin-bottom: min(calc(49 * var(--u)), 5.7svh); }
  .hero__description { font-size: min(calc(23 * var(--u)), 3.1svh); margin-top: 2svh; }
  .hero__actions { margin-top: 3.4svh; }
}
@media (max-width: 1023px) {
  :root { --gutter: 28px; }
  .hero { height: max(100svh, 820px); }
  .hero::after { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(90deg, #0306058c, transparent 85%); pointer-events: none; }
  .bar { padding: 26px var(--gutter) 0; gap: 0; }
  .bar__mark { width: 124px; }
  .bar__actions { margin: 0; gap: 14px; transform: none; }
  .search-trigger { width: clamp(210px, 30vw, 280px); height: 40px; padding: 0 13px; }
  .search-trigger svg { width: 15px; height: 15px; }
  .search-field > svg { width: 16.7px; height: 16.7px; }
  .briefing-link { font-size: 13.6px; height: 36px; min-width: 128px; padding: 0 12px; }
  .hero__copy { top: 175px; left: var(--gutter); }
  .hero__eyebrow { width: 360px; max-width: calc(100vw - 2 * var(--gutter)); gap: 18px; margin-bottom: 44px; font-size: 7px; letter-spacing: 2.5px; }
  .hero__title { padding-left: 30px; }
  .hero__title::before { top: 0; height: 212.3px; width: 1px; }
  .hero__title-sans { font-size: 110px; line-height: 1; letter-spacing: -2px; }
  .hero__title em { font-size: clamp(79.2px, 13.2vw, 101.2px); line-height: 1.02; letter-spacing: 0; }
  .hero__description { margin-top: 24px; font-size: 19px; line-height: 1.45; }
  .hero__actions { gap: 24px; margin-top: 30px; }
  .system-link { height: 42px; width: 200px; padding: 0 18px; font-size: 14.5px; }
  .path-link { font-size: 14px; min-height: 29px; gap: 9px; }
  .hero__actions svg { width: 16px; height: 14px; }
  .hero__principles { font-size: 7px; letter-spacing: 2.5px; gap: 8px; bottom: 38px; }
  .hero__principles { right: var(--gutter); bottom: 28px; }
  .hero__principles::after { width: 26px; margin-top: 2px; }
}
@media (max-width: 540px) {
  :root { --gutter: 22px; }
  .hero { height: max(100svh, 760px); }
  .hero::after { background: linear-gradient(90deg, #030605c9, #03060540 80%), linear-gradient(0deg, #0306059c, transparent 35%); }
  .bar { padding-top: 22px; gap: 0; }
  .bar__mark { width: clamp(78px, 24vw, 106px); }
  .briefing-link { display: none; }
  .bar__actions { gap: 0; }
  .search-trigger { width: clamp(112px, 34vw, 172px); height: 38px; padding: 0 10px; gap: 8px; }
  .search-trigger .search-trigger__context, .search-trigger kbd { display: none; }
  .hero__copy { top: 170px; }
  .hero__eyebrow { width: calc(100vw - 2 * var(--gutter)); margin-bottom: 32px; font-size: 6px; letter-spacing: 2px; gap: 12px; }
  .hero__title { padding-left: 10px; }
  .hero__title-sans { font-size: 18.48vw; letter-spacing: -.3vw; }
  .hero__title em { margin-top: 4px; font-size: 16.17vw; line-height: 1.02; letter-spacing: -.6vw; }
  .hero__title::before { left: -6px; height: 34.54vw; }
  .hero__description { font-size: 16px; margin-top: 24px; line-height: 1.45; }
  .hero__actions { align-items: flex-start; flex-direction: column; gap: 17px; margin-top: 27px; }
  .system-link { width: 200px; height: 42px; font-size: 14.5px; }
  .path-link { font-size: 14px; }
  .hero__principles { font-size: 6px; letter-spacing: 1.8px; }
  .search-field { min-height: 62px; margin: 0 18px; gap: 8.9px; }
  .search-content { padding-inline: 7px; }
  .search-result { padding: 12px; min-height: 49px; gap: 14px; }
  .search-status { margin-left: 13px; }
  .search-result-category { font-size: 9px; }
  .search-panel__footer { padding-inline: 20px; }
  .search-panel__keys { gap: 10px; }
}
@media (min-width: 541px) and (max-width: 760px) {
  .bar__actions .briefing-link { display: none; }
  .bar__mark { width: 112px; }
  .search-trigger { width: clamp(180px, 34vw, 240px); }
}
@media (max-width: 360px) {
  :root { --gutter: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
  .hero__scene { transform: none !important; }
  .hero__particles { display: none; }
}

/* Scroll through the visor. Normal document flow remains the no-JS fallback. */
.hero-journey { position: relative; background: #000; }
.hero-journey.is-active { height: var(--journey-height); }
.hero-journey.is-active .hero { position: sticky; top: var(--journey-top, 0px); border-bottom-color: transparent; }
.hero-journey.is-active .hero__world { will-change: transform; }
.hero-journey.is-active .hero__copy {
  opacity: var(--copy-opacity, 1);
  transform: translate3d(var(--copy-x, 0px), 0, 0);
}
.hero-journey.is-active :is(.hero__principles, .hero__legal) { opacity: var(--chrome-opacity, 1); }
.hero-journey.is-active .hero::after { opacity: var(--chrome-opacity, 1); }
.hero__void { display: none; }
.services { position: relative; z-index: 2; min-height: var(--services-height, 410svh); padding: 0 var(--gutter); }
.hero-journey.is-active + .services { margin-top: -100svh; }
.services__intro { visibility: hidden; position: sticky; top: 0; min-height: 100svh; display: grid; place-items: center; padding: 120px 0 80px; box-sizing: border-box; text-align: center; }
/* Fixed text geometry: only the reveal surface changes during a scroll. */
.services__copy { display: grid; place-items: center; width: 100%; max-width: 1140px; margin: auto; }
.services h2 { display: grid; grid-area: 1 / 1; margin: 0; width: 100%; color: #eeede8; font: 300 clamp(58px, 7.5vw, 116px)/1.18 Sora, Archivo, var(--sans); letter-spacing: -.025em; }
.services__ambition, .services__engineering { grid-area: 1 / 1; justify-self: center; width: max-content; max-width: 100%; min-width: 0; white-space: nowrap; }
.services__lede, .services__detail { grid-area: 1 / 1; width: 100%; margin: 0; color: #cbd2d8; font: 300 clamp(32px, 3.5vw, 56px)/1.28 "Helvetica Neue", Inter, var(--sans); letter-spacing: -.012em; text-wrap: balance; }
.services__lede { max-width: 21em; }
.services__detail { max-width: 23em; font-size: clamp(30px, 3.1vw, 50px); }
/* Each paragraph ends on its accent, in the hero's serif italic. The padding (cancelled by the margin, so nothing
   moves) gives every line's piece room for the italic's overhang when the words are painted through a background. */
.services__accent { padding: .1em .16em .16em; margin: 0 -.16em; color: #f2efe9; font: italic 400 1.04em/1 "Instrument Serif", var(--serif); letter-spacing: 0; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.services__ink { display: block; padding: .12em .09em .18em; transform-origin: center; }
.services.is-static .services__intro { visibility: visible; }
.services.is-static .services__copy, .services.is-static h2 { display: block; }
.services.is-static .services__ambition, .services.is-static .services__engineering { display: block; }
.services.is-static .services__lede, .services.is-static .services__detail { margin: 30px auto 0; }
/* One soft horizontal aperture spans all lines together. The lighting is
   inside the letterforms; no duplicate text or animated paragraph reflow. */
.services.is-scroll-reveal .services__intro { position: fixed; inset: 0 var(--gutter); min-height: 0; visibility: var(--services-visibility, hidden); pointer-events: none; }
.services.is-scroll-reveal :is(.services__ambition, .services__engineering, .services__lede, .services__detail) { opacity: var(--text-opacity, 0); }
.services.is-scroll-reveal .services__ink {
  --ink: #eeede8;
  --feather: 8%;
  background-image: linear-gradient(105deg, var(--ink) 0%, var(--ink) 35%, #cda8ac 44%, #e9edf1 50%, #a2bed3 56%, var(--ink) 65%, var(--ink) 100%);
  background-size: 300% 100%;
  background-position: var(--text-light, 100%) 50%;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  mask-image: linear-gradient(90deg, transparent calc(50% - var(--text-edge, 0%) - var(--feather)), #000 calc(50% - var(--text-edge, 0%)), #000 calc(50% + var(--text-edge, 0%)), transparent calc(50% + var(--text-edge, 0%) + var(--feather)));
  -webkit-mask-image: linear-gradient(90deg, transparent calc(50% - var(--text-edge, 0%) - var(--feather)), #000 calc(50% - var(--text-edge, 0%)), #000 calc(50% + var(--text-edge, 0%)), transparent calc(50% + var(--text-edge, 0%) + var(--feather)));
  filter: var(--text-filter, none);
  transform: scaleX(var(--text-spread, 1));
}
.services.is-scroll-reveal :is(.services__lede, .services__detail) .services__ink { --ink: #cbd2d8; --feather: 11%; }
.services.is-scroll-reveal [data-text-state="hidden"] { visibility: hidden; }
/* The settled text becomes plain native type: no filter, mask or transform
   is retained through the reading hold. No time-based animation is used. */
.services.is-scroll-reveal [data-text-state="held"] .services__ink {
  background: none; -webkit-text-fill-color: currentColor;
  mask-image: none; -webkit-mask-image: none; filter: none; transform: none;
}
/* While a paragraph holds, its accent lights up and a pale sheen slides through it with the scroll (hero-scroll.js
   sets --glint-x from the scroll and --glint, 0 to 1, from where in the hold it is). At --glint 0 the accent is the
   paragraph's own ink, as the reveal painted it, so the hand-over at either end of the hold shows nothing. */
.services.is-scroll-reveal .services__accent { color: var(--ink); }
@supports (color: color-mix(in oklab, red 50%, blue)) {
  .services.is-scroll-reveal [data-text-state="held"] .services__accent {
    --k: calc(var(--glint, 0) * 100%);
    background: linear-gradient(100deg, color-mix(in oklab, #f2efe9 var(--k), var(--ink)) 22%, color-mix(in oklab, #efc3c9 var(--k), var(--ink)) 37%, color-mix(in oklab, #ffffff var(--k), var(--ink)) 48%, color-mix(in oklab, #bfd6ea var(--k), var(--ink)) 59%, color-mix(in oklab, #f2efe9 var(--k), var(--ink)) 74%) var(--glint-x, 0px) 0 / 11em 100% repeat-x;
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  }
}
@media (max-width: 600px) {
  .services__intro { padding-block: 100px 60px; }
  .services h2 { font-size: clamp(30px, 10.5vw, 60px); letter-spacing: -.025em; }
  .services__lede { font-size: clamp(26px, 7.3vw, 34px); line-height: 1.3; }
  .services__detail { font-size: clamp(25px, 6.8vw, 31px); line-height: 1.3; }
}
@media (max-height: 600px) {
  .services__intro { padding-block: 84px 24px; }
  .services h2 { font-size: clamp(30px, 10vw, 86px); }
  .services__lede, .services__detail { max-width: 26em; font-size: clamp(20px, 3.2vw, 34px); line-height: 1.26; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-journey.is-active { height: auto; }
  .hero-journey.is-active .hero { position: relative; top: auto; }
  .hero__world, .hero-journey.is-active .hero__copy { transform: none !important; filter: none !important; }
  .hero-journey.is-active .hero__copy, .hero-journey.is-active .hero__principles { opacity: 1; }
  .hero__void { display: none; }
  .hero-journey.is-active + .services { margin-top: 0; }
  .services { min-height: 100svh; }
  .services__intro, .services h2, .services__lede, .services__detail { transition: none !important; }
}

/* The calibrated relief preserves the photo crop and adds a muted galaxy
   inside the visor at rest. The original photo remains the fallback. */
.hero__depth { opacity: 0; pointer-events: none; }
.hero__art.is-depth-active > img { opacity: 0; }
.hero__art.is-depth-active .hero__depth { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .hero__depth { display: none; }
  .hero__art.is-depth-active > img { opacity: 1; }
}

/* Red and blue cosmic atmosphere shared by the visor and services. */
body { isolation: isolate; }
.cosmic-space { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; background: #050b12; }
.cosmic-space__image {
  position: absolute; inset: -7%;
  background: url("hero/cosmic-space-v3.png") center / cover no-repeat;
  filter: var(--space-copy-filter, none);
  transform: translate3d(var(--space-x, 0px), var(--space-y, 0px), 0) scale(var(--space-scale, 1));
}
.cosmic-space::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #02060d40, transparent 80%), linear-gradient(0deg, #02060d88, transparent 75%); }
.hero-journey, .hero, .services { background: transparent; }
/* Keep the loading surface black until the first depth frame is drawn.
   Rim-light colors then sit behind the photo, whose sky transmission keeps them faint. */
.hero__world { background: #000; }
.hero[data-depth="ready"] .hero__world { background: transparent; }
.hero__world::before, .hero__world::after {
  content: ""; position: absolute; inset: -5%; z-index: -3; pointer-events: none;
  visibility: hidden;
  opacity: var(--chrome-opacity, 1);
  will-change: transform;
}
.hero[data-depth="ready"] .hero__world::before,
.hero[data-depth="ready"] .hero__world::after { visibility: visible; }
.hero__world::before {
  background:
    radial-gradient(ellipse 46% 32% at 8% 18%, #d62c2699 0%, #9f222444 44%, transparent 78%),
    radial-gradient(ellipse 24% 13% at 31% 9%, #ed493747 0%, transparent 80%);
  animation: hero-red-haze 17s ease-in-out infinite alternate;
}
.hero__world::after {
  background:
    radial-gradient(ellipse 35% 24% at 39% 10%, #338dcc99 0%, #27649444 43%, transparent 80%),
    radial-gradient(ellipse 23% 34% at 3% 46%, #69bada55 0%, transparent 78%);
  animation: hero-blue-haze 21s ease-in-out -8s infinite alternate;
}
@keyframes hero-red-haze {
  from { transform: translate3d(-1%, 0, 0) scale(1); }
  to { transform: translate3d(2%, 1.5%, 0) scale(1.06); }
}
@keyframes hero-blue-haze {
  from { transform: translate3d(1%, -1%, 0) scale(1.04); }
  to { transform: translate3d(-2%, 2%, 0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .hero__world::before, .hero__world::after { animation: none; will-change: auto; }
}
.hero-journey.is-active .hero__art::after { opacity: var(--chrome-opacity, 1); }
@media (max-width: 600px) {
  .cosmic-space__image { background-position: 56% center; }
  .cosmic-space::after { background: linear-gradient(90deg, #02060d66, #02060d33), linear-gradient(0deg, #02060d88, transparent 80%); }
}
@media (prefers-reduced-motion: reduce) {
  .hero__world { opacity: 1; }
  .cosmic-space__image { transform: none; }
}

/* Cloud motion is rendered inside the texture, independently of the camera. */
.cosmic-space__nebula { position: absolute; inset: 0; width: 100%; height: 100%; }
.cosmic-space__stars { position: absolute; inset: 0; width: 100%; height: 100%; transform: translate3d(var(--space-x, 0px), var(--space-y, 0px), 0) scale(var(--space-scale, 1)); }
@media (prefers-reduced-motion: reduce) {
  .cosmic-space__image { animation: none; }
  .cosmic-space__stars { display: none; }
}

/* Persistent navigation lives outside the clipped, sticky hero. */
/* Fade the glass surfaces themselves. Ancestor opacity would create a
   backdrop root that prevents their blur from sampling the scene behind them. */
.bar__search, .bar__actions { translate: none; }
.search-trigger, .bar__actions > .menu-trigger { opacity: var(--nav-opacity, 1); overflow: hidden; }
@media (prefers-reduced-motion: reduce) {
  .bar__search, .bar__actions { translate: none; }
  .search-trigger, .bar__actions > .menu-trigger { opacity: 1; }
}
/* (no will-change on the open glass: it is composited anyway, by its backdrop-filter, and will-change: transform would
   snap its layer to whole pixels, which put its type half a pixel off the pill's) */
body.is-search-landing .search-trigger[aria-expanded="true"] { opacity: var(--nav-opacity, 1); }
.site-search.is-closing::backdrop { animation: search-backdrop-out 300ms ease-out both; }
@keyframes search-backdrop-out { from { opacity: 1; } to { opacity: 0; } }

.services.is-static { min-height: 100svh; }