/* The hand built pages
   ------------------------------------------------------------------
   Rules that belong to pages a person wrote, and to nothing else.

   Why this file exists: site.css was built and audited by hand and lives
   only on the host, outside the repository and outside both publishers'
   fences, so a page level change cannot touch it. And the host sends
   Content-Security-Policy style-src 'self', so a style block inside a page
   is refused by every browser. Anything a page needs beyond site.css comes
   here, and this file goes up with the pages by the same workflow.

   The newsroom has its own file, wire.css, and never writes this one. The
   fence in tools/publish_site.py names this file exactly and nothing else
   under assets/.

   Rules this file keeps, the same as every other stylesheet on the site:
     - No opacity on text. Anything that recedes gets a measured colour.
     - The violet is a fill or a mark, never text on a dark surface.
     - Nothing moves for a reader who has asked for less motion.
     - The footer's Pause motion box stops anything that loops.
   ------------------------------------------------------------------ */

/* The hero used to carry the agent run diagram beneath its copy. Now the
   two halves follow it directly, so the hero gives up half its bottom
   padding rather than stack a full gap on top of the dark band's own. */
.band--hero-lead { padding-block-end: calc(var(--hero-bottom) * 0.5); }

/* The About hero. Copy on the left, Hardy and Butler on the right, a dark
   studio picture of the two agents under the lit sign, with no card and no
   shadow because its own dark ground is the edge. It is capped at 560 pixels
   and centred in its column, and it stacks under the copy on a phone. */
.hero-pair {
  align-items: center;
}
.twins-figure--pair img {
  inline-size: auto;
  max-inline-size: min(100%, 560px);
  block-size: auto;
  margin-inline: auto;
  box-shadow: none;
}
.twins-figure--pair figcaption {
  margin-inline: auto;
  max-inline-size: 560px;
}
@media (max-width: 63.99em) {
  .twins-figure--pair {
    margin-block-start: 32px;
  }
}

/* Fix pack v6, 5 September 2026. Every job card on the home page and every
   model card in the catalogue now leads somewhere, and the contact page can
   show which one sent the visitor here. */
.card__link {
  color: inherit;
  text-decoration: none;
}
.card__link:hover,
.card__link:focus-visible {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}
.card__act {
  margin-block-start: 12px;
  font-size: 0.9375rem;
}
.card__act + .card__act {
  margin-block-start: 4px;
}
.form__chosen {
  margin: 0 0 16px;
  padding: 12px 14px;
  border: 1px solid var(--rule, #DBDADD);
  border-radius: 10px;
  font-size: 0.9375rem;
}
.form__chosen[hidden] {
  display: none;
}

/* The booking link on the contact rail: one plain anchor with an inline
   icon, no embed, no script, nothing fetched until it is followed. */
.book-link {
  margin-block-start: 20px;
}
.book-link__anchor {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: inherit;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}
.book-link__anchor:hover,
.book-link__anchor:focus-visible {
  text-decoration-thickness: 2px;
}
.book-link__icon {
  flex: 0 0 24px;
  inline-size: 24px;
  block-size: 24px;
}
.book-link__note {
  margin-block-start: 6px;
}
.book-line {
  margin-block-start: 16px;
}

/* The three steps after you send, on the success block and on thanks.html. */
.after-steps {
  list-style: none;
  margin: 20px 0 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.after-steps li {
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr);
  gap: 10px;
  align-items: baseline;
}
.after-steps .mono {
  color: var(--text-mute, #5A5470);
}

/* The Wire video is hidden until site.js switches it on, at every screen
   width, for a visitor who has not asked for less motion and has not turned
   Save-Data on. Otherwise, and without JavaScript, the still shows, which is
   the same picture, and the film is never downloaded. */
.wire-hero .wire-hero__clip[data-video-wait] {
  display: none;
}
.wire-hero .wire-hero__clip[data-video-wait] + .wire-hero__still {
  display: block;
}

/* The contact form's own error lines, 5 September 2026. Each invalid field
   says what is wrong beneath it, in words as well as colour, and the word
   Error leads so a screen reader hears it first. #B42318 is 6.1 to 1 on the
   canvas and 5.9 to 1 on canvas-2. */
.form__rule {
  margin: 0 0 8px;
  color: var(--text-mute, #5A5470);
}
.field__error {
  margin: 6px 0 0;
  font-size: 0.9375rem;
  font-weight: 700;
  color: #B42318;
}
.field__error[hidden] {
  display: none;
}
.field__input[aria-invalid="true"],
.field__select[aria-invalid="true"],
.field__textarea[aria-invalid="true"] {
  border-color: #B42318;
  box-shadow: 0 0 0 1px #B42318;
}

/* WCAG 2.5.8: a target at least 24 pixels tall. The card action links sit
   in 15 pixel text, so they carry block padding to reach it; found by axe
   on the catalogue at 1280 on 5 September 2026. */
.card__act .text-link {
  display: inline-block;
  padding-block: 4px;
}

/* Fix pack v7, 15 September 2026.

   THE FIRST SCREEN. At 1024 and wider the agent run diagram sits in the
   right half of the hero, beside the headline, instead of below the pair.
   The page holds one copy of it. The three sections live in one wrapper in
   the order hero, run, pair; from 1024 the wrapper is a grid that puts the
   run beside the hero and the pair beneath both, and below 1024 it is a
   column that shows hero, pair, run, which is where the run always sat.
   The pair carries no focusable element, so moving it costs the keyboard
   order nothing. The diagram carries no reveal class: it is visible with
   JavaScript off and never waits at zero opacity for an observer. */
.lead-set {
  display: flex;
  flex-direction: column;
}
.lead-set__hero { order: 1; }
.lead-set__twins { order: 2; }
.lead-set__trace { order: 3; }

.lead-set__trace .fig--trace {
  max-inline-size: 680px;
  margin-inline: auto;
}
/* The drawing is three rows deep so it fits a phone without scrolling
   sideways, which the old one-row timeline needed. */
.lead-set__trace .fig--wide svg {
  min-inline-size: 0;
}

/* The run as a panel, added 20 October 2026. The drawing sits in a lifted
   card with a head (what it is, and its state) and a foot (the step, and
   what happens there), all in the page, so the card looks the same with or
   without JavaScript. site.js 12 plays it; only .is-live changes anything
   below the card itself. The violet stays on Check alone: the route lights
   in ink, and steps still to come take the measured muted colour, never an
   opacity. */
/* The lead set never scrolls the drawing sideways (its svg has no minimum
   width there), so the figure can let the card's shadow show. */
.fig--run {
  overflow: visible;
}

.run-panel {
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: #fff;
  box-shadow: var(--lift-2);
}

.run-panel__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px 16px;
  padding-block-end: 12px;
  margin-block-end: 12px;
  border-block-end: 1px solid var(--line);
}

.run-panel__head .eyebrow {
  margin-block-end: 0;
}

.run-panel__state {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  color: var(--text-mute);
}

/* Ink while it runs; violet only while it waits for a person, because
   violet on this drawing means the person's step. */
.run-panel__dot {
  flex: none;
  inline-size: 8px;
  block-size: 8px;
  border-radius: 50%;
  background: var(--text-strong);
}

.is-playing .run-panel__dot {
  animation: run-pulse 1.4s var(--ease) infinite;
}

.is-waiting .run-panel__dot {
  background: var(--accent);
  animation-name: run-pulse-wait;
}

.is-complete .run-panel__dot {
  inline-size: 10px;
  block-size: 5px;
  border-radius: 0;
  background: none;
  border-inline-start: 2px solid var(--text-strong);
  border-block-end: 2px solid var(--text-strong);
  transform: translateY(-2px) rotate(-45deg);
}

.run-panel__foot {
  display: grid;
  gap: 6px;
  margin-block-start: 12px;
  padding-block-start: 12px;
  border-block-start: 1px solid var(--line);
}

.run-panel__step {
  margin: 0;
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-mute);
}

.run-panel__step b {
  margin-inline-start: 6px;
  color: var(--text-strong);
}

/* Two lines held, so a longer step never pushes the page down. */
.run-panel__what {
  grid-column: 1 / -1;
  margin: 0;
  min-block-size: 2.8em;
  font-size: var(--size-caption);
  line-height: 1.4;
  color: var(--text-strong);
}

.fig--run .run__trail {
  stroke: var(--text-strong);
  stroke-width: 4;
}

/* Still to come: the measured outline grey, 3.7 to 1 on the card, so the
   unlit route is still seen; the lit route is ink and twice as thick. */
.fig--run.is-live:not(.is-complete) .run__lines > :not(.run__trail):not(.is-done) {
  stroke: var(--btn-outline);
}

.fig--run.is-live .run__lines polyline {
  stroke-width: 2.5;
}

.fig--run.is-live .run__lines circle.is-done {
  fill: var(--text-strong);
}

.fig--run.is-live:not(.is-complete) .run__steps text.is-pending {
  fill: var(--text-mute);
}

.run__marker {
  display: none;
}

.is-playing .run__marker {
  display: inline;
}

/* Stopped at Check, the marker steps aside so the square, its ring and
   the approval tick are what is seen. */
.is-held .run__marker {
  display: none;
}

.run__dot {
  fill: var(--text-strong);
}

.run__halo {
  fill: var(--tint-strong);
  transform-box: fill-box;
  transform-origin: center;
  animation: run-halo 1.6s var(--ease) infinite;
}

.run__ring {
  display: none;
  fill: none;
  stroke: var(--accent);
  stroke-width: 2;
  transform-box: fill-box;
  transform-origin: center;
}

.is-waiting .run__ring {
  display: inline;
  animation: run-ring 1.2s var(--ease) infinite;
}

.run__tick {
  display: none;
  fill: none;
  stroke: #fff;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.is-approved .run__tick {
  display: inline;
}

@keyframes run-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(30, 19, 48, 0.35);
  }

  70%,
  100% {
    box-shadow: 0 0 0 8px rgba(30, 19, 48, 0);
  }
}

@keyframes run-pulse-wait {
  0% {
    box-shadow: 0 0 0 0 rgba(109, 74, 255, 0.45);
  }

  70%,
  100% {
    box-shadow: 0 0 0 8px rgba(109, 74, 255, 0);
  }
}

@keyframes run-halo {
  0%,
  100% {
    transform: scale(0.7);
  }

  50% {
    transform: scale(1);
  }
}

@keyframes run-ring {
  0% {
    transform: scale(1);
    stroke-opacity: 1;
  }

  100% {
    transform: scale(2.2);
    stroke-opacity: 0;
  }
}

@media print {
  .run-panel {
    box-shadow: none;
  }

  .run__marker {
    display: none;
  }
}

@media (min-width: 1024px) {
  .lead-set {
    /* The headline keeps the width it had on its own, about half the
       container at 1440, so it stays on three or four lines and the
       buttons stay above the fold; the run takes the rest. */
    --lead-hero: 62%;
    --lead-hero-f: 0.62;
    --lead-run: 38%;
    --lead-run-f: 0.38;
    display: grid;
    grid-template-columns:
      1fr
      min(var(--lead-hero), calc((var(--container) + 2 * var(--margin)) * var(--lead-hero-f)))
      min(var(--lead-run), calc((var(--container) + 2 * var(--margin)) * var(--lead-run-f)))
      1fr;
  }
  .lead-set__hero {
    grid-column: 1 / 3;
    grid-row: 1;
    padding-block-start: calc(var(--hero-top) * 0.45);
  }
  .lead-set__hero > .container {
    max-inline-size: calc((var(--container) + 2 * var(--margin)) * var(--lead-hero-f));
    margin-inline: auto 0;
    padding-inline-end: 12px;
  }
  .lead-set__trace {
    grid-column: 3 / 5;
    grid-row: 1;
    display: flex;
    align-items: center;
    padding-block: calc(var(--hero-top) * 0.45) calc(var(--hero-bottom) * 0.5);
  }
  .lead-set__trace > .container {
    max-inline-size: calc((var(--container) + 2 * var(--margin)) * var(--lead-run-f));
    margin-inline: 0 auto;
    padding-inline-start: 12px;
  }
  .lead-set__twins {
    grid-column: 1 / -1;
    grid-row: 2;
  }
}

/* The label under the pair, on the home page and the brand page. The
   pictures show two AI agents in suits, and the home page's heading says
   Meet, so each page says in words, where a sighted reader will see it, what
   they are and that the pictures were made by AI. */
.twins__label {
  margin-block-start: 20px;
  max-inline-size: 60ch;
}

/* The caret's blink, shared by About's greeting below. It was the home
   film note's until that came off on 22 October 2026. */
@keyframes film-caret {
  50% { visibility: hidden; }
}

/* Hardy and Butler say hello, under their picture on About, 21 October 2026
   from James's words (site.js, job 16). The greeting types itself out once,
   the names in it light their half of the picture, pointing at either half
   does the same, and the agent models on the team turn over beneath it,
   linked to their departments. Without JavaScript the greeting, the six
   departments and the link to every model are simply there. Every picked
   or passed-over state is a colour or a veil over the picture, never
   opacity on text, and under reduced motion nothing types or turns over. */
/* The figure is a grid item, and a grid item will not shrink below its
   widest unbreakable line by default. The model that turns over never wraps,
   so a long one such as "AGT-11 Month-End Assembler, Finance" pushed the
   whole column past a phone's edge while it loaded (found 21 October 2026,
   2 to 38px at 375 wide). With this the column keeps its track's width and
   the long name ends in an ellipsis inside its window. */
.pair-hello {
  min-inline-size: 0;
}
.pair-hello__stage {
  position: relative;
  max-inline-size: 560px;
  margin-inline: auto;
}
.pair-hello__caption {
  margin-block-start: 16px;
}
.pair-hello__line {
  position: relative;
  margin: 0;
  font-family: var(--mono);
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  line-height: 1.6;
  color: var(--text-strong);
}
.pair-hello__name {
  font-weight: 700;
  color: var(--accent-text);
}
button.pair-hello__name {
  padding: 0 2px;
  margin: 0 -2px;
  font: inherit;
  font-weight: 700;
  color: var(--accent-text);
  background: none;
  border: 0;
  border-radius: 4px;
  text-decoration: underline dotted;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.25em;
  cursor: pointer;
}
button.pair-hello__name:hover,
button.pair-hello__name[aria-pressed="true"] {
  color: var(--canvas);
  background: var(--accent-solid);
  text-decoration: none;
}
.pair-hello__line.is-typing > :not(.pair-hello__typed) {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.pair-hello__rest {
  visibility: hidden;
}
.pair-hello__caret {
  display: inline-block;
  inline-size: 0.55em;
  block-size: 1.15em;
  margin-inline-start: 2px;
  vertical-align: text-bottom;
  background: var(--accent-solid);
  animation: film-caret 1s steps(1) infinite;
}
.pair-hello__role {
  min-block-size: 3em;
  margin: 12px 0 0;
  font-size: var(--size-caption);
  line-height: 1.5;
  color: var(--text-mute);
}
.pair-hello__role b {
  color: var(--text-strong);
}

/* The picture's two halves, drawn by site.js over the picture and hidden
   from assistive technology: the buttons in the greeting do the same job. */
.pair-hello__halves {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.pair-hello__half {
  position: relative;
  cursor: pointer;
  background-color: rgba(21, 12, 36, 0);
  box-shadow: inset 0 0 0 0 var(--accent-light);
  transition: background-color var(--enter) var(--ease), box-shadow var(--enter) var(--ease);
}
.pair-hello__tag {
  position: absolute;
  inset-block-end: 14px;
  padding: 4px 10px;
  font-size: var(--size-eyebrow);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--on-dark);
  background: var(--dark);
  border: 1px solid var(--on-dark-mute);
  border-radius: 999px;
}
.pair-hello__half--hardy .pair-hello__tag { inset-inline-start: 14px; }
.pair-hello__half--butler .pair-hello__tag { inset-inline-end: 14px; }
.pair-hello[data-pick="hardy"] .pair-hello__half--butler,
.pair-hello[data-pick="butler"] .pair-hello__half--hardy {
  background-color: rgba(21, 12, 36, 0.62);
}
.pair-hello[data-pick="hardy"] .pair-hello__half--hardy,
.pair-hello[data-pick="butler"] .pair-hello__half--butler {
  box-shadow: inset 0 0 0 3px var(--accent-light);
}
.pair-hello[data-pick="hardy"] .pair-hello__half--hardy .pair-hello__tag,
.pair-hello[data-pick="butler"] .pair-hello__half--butler .pair-hello__tag {
  background: var(--accent-solid);
  border-color: var(--accent-solid);
}

/* The team. The department links are always there; the line that turns
   over, one model at a time, is drawn by site.js above them, with Pause. */
.pair-hello__team {
  margin-block-start: 16px;
  padding-block-start: 16px;
  border-block-start: 1px solid var(--line);
}
.pair-hello__ticker {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-block-end: 14px;
}
.pair-hello__window {
  flex: 1 1 auto;
  min-inline-size: 0;
  block-size: 1.6em;
  overflow: hidden;
  font-family: var(--mono);
  font-size: var(--size-caption);
  line-height: 1.6;
}
.pair-hello__model {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-strong);
  text-decoration: none;
  transform: translateY(0);
  transition: transform var(--enter) var(--ease);
}
.pair-hello__model.is-below {
  transform: translateY(110%);
  transition: none;
}
.pair-hello__model.is-above {
  transform: translateY(-110%);
}
.pair-hello__model:hover .pair-hello__who {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.pair-hello__code {
  font-weight: 700;
  color: var(--accent-text);
}
.pair-hello__in {
  color: var(--text-mute);
}
.pair-hello__pause {
  flex: none;
  padding: 4px 12px;
  font: inherit;
  font-size: var(--size-eyebrow);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-strong);
  background: none;
  border: 1px solid var(--btn-outline);
  border-radius: 999px;
  cursor: pointer;
}
.pair-hello__pause:hover {
  color: var(--accent-text);
  border-color: var(--accent-text);
}
.pair-hello__label {
  margin: 0 0 8px;
  font-size: var(--size-eyebrow);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-strong);
}
.pair-hello__depts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.pair-hello__dept {
  display: inline-block;
  padding: 6px 14px;
  font-size: var(--size-caption);
  font-weight: 600;
  color: var(--text-strong);
  text-decoration: none;
  border: 1px solid var(--btn-outline);
  border-radius: 999px;
  transition: background-color var(--fast) var(--ease), border-color var(--fast) var(--ease);
}
.pair-hello__dept:hover,
.pair-hello__dept.is-on {
  color: var(--accent-text);
  background: var(--tint);
  border-color: var(--accent-text);
}
.pair-hello__all {
  margin: 14px 0 0;
  font-size: var(--size-caption);
}
@media (prefers-reduced-motion: reduce) {
  .pair-hello__half,
  .pair-hello__model,
  .pair-hello__dept {
    transition: none;
  }
}
@media print {
  .pair-hello__typed,
  .pair-hello__halves,
  .pair-hello__role,
  .pair-hello__ticker {
    display: none;
  }
  .pair-hello__line.is-typing > :not(.pair-hello__typed) {
    position: static;
    inline-size: auto;
    block-size: auto;
    margin: 0;
    overflow: visible;
    clip: auto;
    white-space: normal;
  }
}

/* About, who you are dealing with. The portrait is optional: the build
   renders it only when all six files are present, and the copy stands on
   its own without it. */
@media (min-width: 1024px) {
  .person:has(.person-figure) {
    display: grid;
    grid-template-columns: 5fr 7fr;
    column-gap: 64px;
    align-items: center;
  }
  .person:has(.person-figure) .person-figure {
    margin: 0;
  }
}
.person-figure {
  margin: 0 0 32px;
  max-inline-size: 420px;
}
.person-figure img {
  display: block;
  inline-size: 100%;
  block-size: auto;
  box-shadow: var(--lift-2);
}

/* The switchboard cue on Agent Models, found by the measured contrast sweep
   of 15 September 2026 and missed by axe, which cannot read a color-mix
   background. On the open department's tinted cell the violet cue measured
   4.07 to 1, under the 4.5 its 15 pixel text needs. On a tinted cell, open,
   hovered or focused, it takes the deep violet, 9 to 1 or better. */
.board__cell[aria-current="true"] .board__cue,
.board__cell:hover .board__cue,
.board__cell:focus-visible .board__cue {
  color: var(--accent-active);
}

/* Fix pack v8, 16 September 2026.

   The department panels on Agent Models carry the director by name and role
   and no longer by portrait, so the head is one column at every width. */
.dept-head:not(:has(.dept-head__portrait)) {
  grid-template-columns: 1fr;
}

/* The way back to the switchboard at the foot of each department. */
.tabpanel__back {
  margin-block-start: 32px;
  font-size: var(--size-small);
}

/* Who it is for, on the home page, without the organisation chart beside it:
   the five rows take the width, role on the left, the line on the right. */
.rows--wide {
  max-inline-size: 72rem;
}
.rows--wide .rows__item {
  padding-block: 16px;
}
@media (min-width: 768px) {
  .rows--wide .rows__item {
    grid-template-columns: 14rem 1fr;
    align-items: baseline;
    column-gap: 32px;
  }
}

/* The hand built pages carry a sixth footer column, Associated projects. */
@media (min-width: 1200px) {
  .site-footer__grid {
    grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr 1fr;
  }
}

/* Three drawings that draw themselves once, site.js 17, added 21 October
   2026. Only a drawing site.js has armed changes; no word in them moves or
   fades. A square lands by scaling from nothing, a slab settles from above,
   a line draws along its length. Without JavaScript, or under reduced
   motion, each is the finished drawing. */
.fig__trail {
  stroke: currentColor;
  stroke-width: 3;
}

.is-armed .fig__node {
  transform: scale(0);
  transform-box: fill-box;
  transform-origin: center;
}

.is-armed .fig__node.is-reached {
  animation: fig-land 460ms var(--ease) both;
}

.fig__readout-when {
  font-family: var(--mono);
  letter-spacing: 0.08em;
  fill: var(--text-mute);
}

.fig__readout-what {
  font-weight: 700;
  fill: currentColor;
}

.fig--stack.is-armed svg > g:first-of-type polygon {
  opacity: 0;
  transform: translateY(-56px);
  transition: opacity 320ms var(--ease), transform 560ms cubic-bezier(0.25, 1.35, 0.45, 1);
}

.fig--stack.is-drawn svg > g:first-of-type polygon {
  opacity: 1;
  transform: none;
}

.fig--stack.is-armed svg > g:first-of-type polygon:nth-child(2) {
  transition-delay: 320ms;
}

.fig--stack.is-armed svg > g:first-of-type polygon:nth-child(3) {
  transition-delay: 640ms;
}

.fig--stack.is-armed svg > g:first-of-type polygon:nth-child(4) {
  transition-delay: 1000ms;
}

.fig--stack.is-armed svg > g:nth-of-type(2) line {
  transition: stroke-dashoffset 320ms var(--ease) 260ms;
}

.fig--stack.is-drawn svg > g:nth-of-type(2) line {
  stroke-dashoffset: 0;
}

.fig--stack.is-armed svg > g:nth-of-type(2) line:nth-child(2) {
  transition-delay: 580ms;
}

.fig--stack.is-armed svg > g:nth-of-type(2) line:nth-child(3) {
  transition-delay: 900ms;
}

.fig--stack.is-armed svg > g:nth-of-type(2) line:nth-child(4) {
  transition-delay: 1260ms;
}

@keyframes fig-land {
  0% {
    transform: scale(0);
  }

  65% {
    transform: scale(1.25);
  }

  100% {
    transform: scale(1);
  }
}

/* Nova's pitch on the home page, 22 October 2026 (B0944): her thirty second
   film beside the words James approved, "AI on screen. Human at your table."
   The film is 9:16, so it takes a narrow column of its own and shrinks with
   the screen, whole, never cropped (B0374). It never plays by itself: it has
   speech, so it waits for a press, and preload none keeps a phone from
   fetching it until then. The words sit beside the film, never on it. */
.nova-grid {
  display: grid;
  gap: 40px;
  align-items: center;
}

.nova-film {
  margin: 0;
  justify-self: center;
  inline-size: 100%;
  max-inline-size: 360px;
}

.nova-film__clip {
  display: block;
  inline-size: 100%;
  max-inline-size: 100%;
  block-size: auto;
  aspect-ratio: 9 / 16;
  background: #150C24;
}

.nova__copy > * {
  max-inline-size: 52ch;
}

.nova__copy > * + * {
  margin-block-start: 16px;
}

.nova__copy .eyebrow {
  display: inline-block;
}

.nova__close {
  font-weight: 700;
  color: var(--text-strong);
}

@media (min-width: 1024px) {
  .nova-grid {
    grid-template-columns: 4fr 7fr;
    gap: 64px;
  }

  .nova-film {
    justify-self: start;
  }
}

@media print {
  .fig__readout {
    display: none;
  }

  .is-armed .fig__node,
  .fig--stack.is-armed svg > g:first-of-type polygon {
    opacity: 1;
    transform: none;
  }
}