/* 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, the pair cut-out of Butler and Hardy on
   the right, standing on the canvas with no card and no shadow because the
   picture has no background of its own. It is capped at its natural width
   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 decides the screen is wide enough
   and the visitor has not asked for less motion. Without JavaScript the
   still shows, which is the same picture. */
.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;
}

@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. The pictures show two men and the heading says
   Meet, so the page says in words, where a sighted reader will see it, that
   they are drawn to stand for the two roles. */
.twins__label {
  margin-block-start: 20px;
  max-inline-size: 60ch;
}

/* 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;
  }
}