/*
  Blackrock Strategy site styles.

  Order: fonts, tokens, base, type, links and buttons, layout, header, footer,
  page title, home hero, facts, index rows, figures, people, news and articles,
  forms, tabs and FAQ, bands, map, status pages, utilities.

  The look is a printed capability briefing: Helvetica Now on a 12-column grid,
  ink on white and warm-gray paper, maroon #700000 for a few defined jobs, 1px
  rules instead of boxes, and almost no motion.
*/

@font-face {
  font-family: "Helvetica Now Display";
  src: url("/assets/fonts/helveticanowdisplay-light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Helvetica Now Display";
  src: url("/assets/fonts/helveticanowdisplay-regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Helvetica Now Display";
  src: url("/assets/fonts/helveticanowdisplay-medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  --brand: #700000;
  --brand-pressed: #4d0101;

  --ink: #121010;
  --ink-2: #4a4545;
  --muted: #6b6563;
  --paper: #ffffff;
  --paper-2: #f0eeec;
  --rule: #d9d5d2;
  --rule-strong: #121010;
  --night: #121010;
  --on-night: #ffffff;
  --on-night-2: rgba(255, 255, 255, 0.72);
  --on-night-rule: rgba(255, 255, 255, 0.16);

  --font: "Helvetica Now Display", "Helvetica Neue", Helvetica, Arial, sans-serif;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 144px;

  --page-max: 1280px;
  --page-margin: 20px;
  --gutter: 16px;
  --header-height: 64px;

  --radius-control: 2px;
  --shadow-float: 0 12px 32px rgba(18, 16, 16, 0.16);

  --t-fast: 120ms;
  --t-ui: 200ms;
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  --signal: #e2332f;
}

@media (min-width: 768px) {
  :root {
    --page-margin: 32px;
    --gutter: 24px;
  }
}

@media (min-width: 992px) {
  :root {
    --page-margin: 48px;
    --header-height: 72px;
  }
}

/* Base */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-height) + var(--space-5));
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0.005em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

@media (min-width: 992px) {
  body {
    font-size: 1.125rem;
  }
}

body.has-open-menu {
  overflow: hidden;
}

img,
video,
svg,
iframe {
  display: block;
  max-width: 100%;
}

img,
video {
  height: auto;
}

h1,
h2,
h3,
h4,
p,
figure,
blockquote,
address,
dl,
dd,
ul,
ol {
  margin: 0;
}

ul,
ol {
  padding: 0;
}

address {
  font-style: normal;
}

strong,
b {
  font-weight: 500;
}

button,
input,
textarea,
select {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
}

::selection {
  background: var(--brand);
  color: #fff;
}

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

.band :focus-visible,
.site-footer :focus-visible,
.hero :focus-visible,
.page-title--dark :focus-visible,
.facts--card :focus-visible {
  outline-color: #fff;
}

.icon {
  width: 1em;
  height: 1em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Type */

h1,
h2,
h3,
h4 {
  color: var(--ink);
  font-weight: 300;
}

.t-display {
  font-size: clamp(2.625rem, 5.6vw, 5rem);
  line-height: 1.02;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

.t-h1 {
  font-size: clamp(2.375rem, 4.4vw, 4rem);
  line-height: 1.05;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.t-h2 {
  font-size: clamp(1.875rem, 3vw, 2.75rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.t-h3 {
  font-size: clamp(1.3125rem, 1.8vw, 1.625rem);
  font-weight: 400;
  line-height: 1.2;
  text-wrap: balance;
}

.t-lead {
  color: var(--ink);
  font-size: clamp(1.1875rem, 1.6vw, 1.375rem);
  line-height: 1.45;
}

.t-body {
  max-width: 66ch;
  color: var(--ink-2);
}

.t-small {
  font-size: 0.9375rem;
}

.t-caption {
  color: var(--muted);
  font-size: 0.8125rem;
  line-height: 1.45;
}

.t-label {
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  line-height: 1.3;
  text-transform: uppercase;
}

.t-num,
time {
  font-variant-numeric: lining-nums;
}

.prose {
  display: grid;
  gap: 1em;
  max-width: 66ch;
  color: var(--ink-2);
}

.prose strong {
  color: var(--ink);
}

.prose ul {
  display: grid;
  gap: 0.5em;
  padding-left: 1.2em;
}

/* Links and buttons */

a {
  color: inherit;
}

.link,
.prose a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  transition: text-decoration-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}

.prose a:hover {
  color: var(--brand);
  text-decoration-color: var(--brand);
  text-decoration-thickness: 2px;
}

/* On hover a 2px line draws in from the left over the 1px underline. */
.link {
  background: linear-gradient(var(--brand), var(--brand)) 0 100% / 0 2px no-repeat;
  transition: background-size 320ms var(--ease-out), text-decoration-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}

.link:hover {
  color: var(--brand);
  text-decoration-color: transparent;
  background-size: 100% 2px;
}

.link--quiet {
  color: var(--ink-2);
}

.band .link,
.site-footer .link,
.hero .link {
  color: #fff;
}

.band .link,
.site-footer .link,
.hero .link {
  background-image: linear-gradient(#fff, #fff);
}

.band .link:hover,
.site-footer .link:hover,
.hero .link:hover {
  color: #fff;
  text-decoration-color: transparent;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 48px;
  padding: 0 22px;
  border: 1px solid var(--brand);
  border-radius: var(--radius-control);
  background: var(--brand);
  color: #fff;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  /* The hover color fills in from the left. */
  background-image: linear-gradient(var(--brand-pressed), var(--brand-pressed));
  background-repeat: no-repeat;
  background-size: 0% 100%;
  transition: background-size 360ms var(--ease-out), border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}

.button:hover {
  border-color: var(--brand-pressed);
  background-size: 100% 100%;
}

.button--small {
  min-height: 40px;
  padding: 0 16px;
  font-size: 0.9375rem;
}

.button--light {
  border-color: #fff;
  background-color: #fff;
  background-image: linear-gradient(var(--brand), var(--brand));
  color: var(--ink);
}

.button--light:hover {
  border-color: var(--brand);
  color: #fff;
}

/* On the maroon band the light button fills with ink instead, so it stays visible. */
.band .button--light {
  background-image: linear-gradient(var(--ink), var(--ink));
}

.band .button--light:hover {
  border-color: var(--ink);
}

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4) var(--space-6);
}

.skip-link {
  position: fixed;
  top: var(--space-3);
  left: var(--space-3);
  z-index: 200;
  padding: var(--space-3) var(--space-4);
  background: var(--ink);
  color: #fff;
  font-weight: 500;
  text-decoration: none;
  transform: translateY(-200%);
}

.skip-link:focus {
  transform: none;
}

/* Layout */

.container {
  width: 100%;
  max-width: calc(var(--page-max) + var(--page-margin) * 2);
  margin-inline: auto;
  padding-inline: var(--page-margin);
}

.section {
  padding-block: clamp(var(--space-8), 9vw, var(--space-10));
}

.section--compact {
  padding-block: clamp(var(--space-7), 6vw, var(--space-8));
}

.section--paper-2 {
  background: var(--paper-2);
}

.section--ruled {
  border-top: 1px solid var(--rule);
}

.section--tight-top {
  padding-top: 0;
}

/*
  The 12-column grid. Columns 1 to 3 are the margin column for labels, dates,
  captions and data; columns 4 to 12 carry the main content. Below 992px every
  part takes the full width, and margin notes fall after the main text.
*/
.layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: var(--space-5);
}

@media (min-width: 992px) {
  .layout {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gutter);
  }

  .layout__margin { grid-column: 1 / 4; }
  .layout__main { grid-column: 4 / 13; }
  .layout__body { grid-column: 4 / 11; }
  .layout__wide { grid-column: 1 / 10; }
  .layout__full { grid-column: 1 / -1; }
  .layout__left-7 { grid-column: 1 / 8; }
  .layout__right-5 { grid-column: 8 / 13; }
  .layout__left-8 { grid-column: 1 / 9; }
  .layout__right-4 { grid-column: 9 / 13; }
}

@media (max-width: 991px) {
  .layout__note {
    order: 2;
  }
}

.stack {
  display: grid;
  gap: var(--space-5);
  align-content: start;
  justify-items: start;
}

.stack--tight {
  gap: var(--space-3);
}

.stack--loose {
  gap: var(--space-6);
}

/* Ruled lists keep the full width of their column inside a stack. */
.stack > .plain-list,
.stack > .facts,
.stack > .index {
  justify-self: stretch;
}

/* A side column (Contact's address and map) that drops under the main column on phones. */
@media (max-width: 991px) {
  .layout__aside {
    margin-top: var(--space-5);
    padding-top: var(--space-6);
    border-top: 1px solid var(--rule);
  }
}

.link-list {
  display: grid;
  gap: var(--space-2);
  justify-items: start;
  list-style: none;
}

.rule {
  height: 0;
  margin: 0;
  border: 0;
  border-top: 1px solid var(--rule);
}

/* Header */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--header-height);
  border-bottom: 1px solid var(--rule);
  background: var(--paper);
  transition: transform 320ms var(--ease-out);
  view-transition-name: site-header;
}

/* Tucked away while reading down the page; site.js brings it back on the way up. */
.site-header.is-tucked {
  transform: translateY(calc(-100% - 2px));
}

/* A maroon line along the top of the window shows how far down the page you are. */
@supports (animation-timeline: scroll()) {
  body::before {
    content: "";
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 101;
    height: 2px;
    background: var(--brand);
    transform: scaleX(0);
    transform-origin: left;
    animation: page-progress linear both;
    animation-timeline: scroll(root);
  }

  @keyframes page-progress {
    to {
      transform: scaleX(1);
    }
  }
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  height: 100%;
}

/* The animated mark (a still frame when motion is reduced) beside the wordmark. The mark's
   square has white space around the line, so it sits slightly left and the gap is small. */
.site-header__logo {
  display: inline-flex;
  flex: none;
  align-items: flex-start;
  gap: 2px;
  margin-right: auto;
  margin-left: -2px;
}

.site-header__mark {
  width: 34px;
  height: 34px;
}

.site-header__wordmark {
  width: auto;
  height: 33px;
  margin-top: 2px;
}

@media (min-width: 992px) {
  .site-header__mark {
    width: 38px;
    height: 38px;
  }

  .site-header__wordmark {
    height: 37px;
  }
}

.site-nav {
  display: none;
}

.site-nav__list {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  list-style: none;
}

.site-nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: var(--header-height);
  color: var(--ink);
  font-size: 0.9375rem;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--t-fast) var(--ease);
}

.site-nav__link:hover {
  color: var(--brand);
}

.site-nav__link[aria-current]::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 2px;
  background: var(--brand);
}

.site-header__contact {
  display: none;
}

.site-header__contact[aria-current] {
  border-color: var(--brand-pressed);
  background: var(--brand-pressed);
}

.menu-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  height: 44px;
  margin-right: calc(var(--space-2) * -1);
  padding: 0 var(--space-2);
  border: 0;
  background: transparent;
  color: var(--ink);
  font-size: 0.9375rem;
  font-weight: 500;
}

.menu-toggle__bars,
.menu-toggle__bars::before {
  display: block;
  width: 18px;
  height: 1.5px;
  background: currentColor;
  transition: transform var(--t-ui) var(--ease);
}

.menu-toggle__bars {
  position: relative;
  transform: translateY(-3px);
}

.menu-toggle__bars::before {
  content: "";
  position: absolute;
  top: 6px;
  left: 0;
}

.menu-toggle[aria-expanded="true"] .menu-toggle__bars {
  transform: translateY(0) rotate(45deg);
}

.menu-toggle[aria-expanded="true"] .menu-toggle__bars::before {
  transform: translateY(-6px) rotate(-90deg);
}

.mobile-menu {
  position: fixed;
  top: var(--header-height);
  right: 0;
  left: 0;
  z-index: 99;
  display: flex;
  flex-direction: column;
  gap: var(--space-7);
  height: calc(100dvh - var(--header-height));
  padding: var(--space-5) var(--page-margin) var(--space-7);
  background: var(--paper);
  box-shadow: var(--shadow-float);
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 150ms var(--ease), transform 150ms var(--ease), visibility 0s linear 150ms;
}

.mobile-menu.is-open {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity var(--t-ui) var(--ease), transform var(--t-ui) var(--ease), visibility 0s;
}

.mobile-menu__list {
  list-style: none;
}

.mobile-menu__list li {
  border-bottom: 1px solid var(--rule);
}

.mobile-menu__list a {
  display: block;
  padding: var(--space-4) 0;
  color: var(--ink);
  font-size: 1.75rem;
  font-weight: 400;
  line-height: 1.2;
  text-decoration: none;
}

.mobile-menu__list a[aria-current] {
  color: var(--brand);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.2em;
}

.mobile-menu__contact {
  display: grid;
  justify-items: start;
  margin-top: auto;
}

.mobile-menu__contact a {
  padding-block: var(--space-2);
}

@media (min-width: 992px) {
  .site-nav,
  .site-header__contact {
    display: flex;
  }

  .menu-toggle,
  .mobile-menu {
    display: none;
  }
}

/* Without JavaScript the menu button cannot open; the footer links still reach every page. */
html:not(.js) .menu-toggle {
  display: none;
}

/* Footer */

.site-footer {
  padding-top: clamp(var(--space-8), 8vw, var(--space-9));
  background: var(--night);
  color: var(--on-night-2);
  font-size: 0.9375rem;
}

.site-footer__grid {
  display: grid;
  gap: var(--space-7);
  padding-bottom: var(--space-8);
}

@media (min-width: 768px) {
  .site-footer__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 992px) {
  .site-footer__grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gutter);
  }

  .site-footer__office { grid-column: 1 / 5; }
  .site-footer__contracting { grid-column: 6 / 10; }
  .site-footer__links { grid-column: 10 / 13; }
}

.site-footer__logo img {
  width: auto;
  height: 40px;
}

.site-footer__office {
  display: grid;
  gap: var(--space-5);
  align-content: start;
  justify-items: start;
}

.site-footer__heading {
  margin-bottom: var(--space-4);
  color: var(--on-night-2);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.site-footer a {
  color: var(--on-night);
  text-decoration: none;
}

.site-footer a:hover {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.site-footer__nav {
  display: grid;
  list-style: none;
}

.site-footer__nav a {
  display: inline-block;
  padding-block: 6px;
}

/* Bigger tap targets for the footer's phone, email and page links on phones. */
@media (max-width: 991px) {
  .site-footer address a {
    display: inline-block;
    padding-block: 10px;
  }

  .site-footer__nav a {
    padding-block: 10px;
  }

  .site-footer__meta > a {
    display: inline-block;
    padding-block: 11px;
  }
}

.site-footer .facts {
  border-color: var(--on-night-rule);
}

.site-footer .facts__row {
  border-color: var(--on-night-rule);
}

.site-footer .facts dt {
  color: var(--on-night-2);
}

.site-footer .facts dd {
  color: var(--on-night);
}

.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  padding-block: var(--space-6);
  border-top: 1px solid var(--on-night-rule);
  font-size: 0.875rem;
}

.site-footer__badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

.site-footer__badges img {
  width: auto;
  height: 48px;
  padding: 6px 10px;
  background: #fff;
}

.site-footer__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-5);
}

.site-footer__newsletter {
  display: grid;
  gap: var(--space-3);
  max-width: 520px;
  padding-bottom: var(--space-7);
}

/* Page title (inner pages) */

.page-title {
  padding-top: clamp(var(--space-7), 7vw, var(--space-9));
}

.page-title__inner {
  position: relative;
  display: grid;
  gap: var(--space-5);
  padding-bottom: clamp(var(--space-6), 4vw, var(--space-7));
}

/* The ink rule under the title, drawn as its own line so it can draw in from the left. */
.page-title__inner::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 1px;
  background: var(--rule-strong);
  transform-origin: left;
}

@media (min-width: 992px) {
  .page-title__inner {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gutter);
  }

  .page-title__inner > h1 { grid-column: 1 / 10; }
  .page-title__inner > .t-lead,
  .page-title__inner > .page-title__extra { grid-column: 4 / 11; }
  .page-title__inner > .page-title__meta { grid-column: 1 / 4; grid-row: 2; }
}

.page-title__meta {
  color: var(--muted);
  font-size: 0.8125rem;
}

/*
  Inner pages open on a dark briefing header: the page's own photo dimmed behind white
  type, a status row like the home page's, and a red rule that draws in underneath.
*/
.page-title--dark {
  position: relative;
  overflow: hidden;
  padding-top: clamp(var(--space-7), 6vw, var(--space-9));
  background: var(--night);
  color: #fff;
  isolation: isolate;
}

.page-title__media {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.42;
  filter: grayscale(0.3);
}

.page-title--dark::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(18, 16, 16, 0.94), rgba(18, 16, 16, 0.62) 55%, rgba(18, 16, 16, 0.3)),
    linear-gradient(to top, rgba(18, 16, 16, 0.65), transparent 45%);
}

.page-title--dark h1 {
  color: #fff;
}

.page-title--dark .t-lead,
.page-title--dark .t-body {
  color: rgba(255, 255, 255, 0.86);
}

.page-title--dark .page-title__meta,
.page-title--dark .link--quiet {
  color: rgba(255, 255, 255, 0.75);
}

.page-title--dark .link {
  color: #fff;
  background-image: linear-gradient(#fff, #fff);
}

.page-title--dark .link--quiet {
  color: rgba(255, 255, 255, 0.75);
}

.page-title--dark .link:hover {
  color: #fff;
}

.page-title--dark .page-title__inner {
  padding-bottom: clamp(var(--space-7), 5vw, var(--space-8));
}

.page-title--dark .page-title__inner::after {
  height: 2px;
  background: var(--signal);
}

.page-title__status {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-6);
  margin-bottom: clamp(var(--space-6), 4vw, var(--space-7));
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.page-title__status > span {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  white-space: nowrap;
}

/* The hero's coordinates link down to the radar map. */
.hero__status-link {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px dotted rgba(255, 255, 255, 0.5);
}

.hero__status-link:hover {
  color: #fff;
  border-bottom-style: solid;
}

/* A decoding code keeps its real text in the layout and draws the readout on top. */
[data-decode] {
  position: relative;
}

.decode__sizer {
  visibility: hidden;
}

.decode__shown {
  position: absolute;
  top: 0;
  left: 0;
  white-space: nowrap;
}

/* Copy buttons on contracting codes. */
.copy-button {
  min-height: 26px;
  margin-left: var(--space-2);
  padding: 0 8px;
  border: 1px solid currentColor;
  border-radius: var(--radius-control);
  background: transparent;
  color: inherit;
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  line-height: 1;
  text-transform: uppercase;
  vertical-align: 0.15em;
  opacity: 0.65;
  transition: opacity var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}

.copy-button:hover,
.copy-button.is-done {
  opacity: 1;
}

.copy-button.is-done {
  border-color: var(--brand);
  background: var(--brand);
  color: #fff;
}

/* The contracting data sheet on Government services, set as a dark credential card. */
.facts--card {
  padding: var(--space-4) var(--space-6);
  border-top: 0;
  background: var(--night);
  color: #fff;
}

.facts.facts--card .facts__row {
  border-color: var(--on-night-rule);
}

.facts--card .facts__row:last-child {
  border-bottom: 0;
}

.facts.facts--card dt {
  color: var(--on-night-2);
}

.facts.facts--card dd {
  color: #fff;
}

/* On a long capability list, the margin column keeps count of where you are (desktop only). */
.index-counter {
  display: grid;
  gap: var(--space-2);
  margin-top: var(--space-6);
}

.index-counter__count {
  color: var(--brand);
  font-size: clamp(2.5rem, 4vw, 3.5rem);
  font-weight: 300;
  line-height: 1;
  font-variant-numeric: lining-nums;
}

.index-counter__name {
  color: var(--muted);
  font-size: 0.9375rem;
}

.index__row.is-current .index__name {
  color: var(--brand);
}

@media (min-width: 992px) {
  .index-follow {
    position: sticky;
    top: calc(var(--header-height) + var(--space-5));
    align-self: start;
  }
}

@media (max-width: 991px) {
  .index-counter {
    display: none !important;
  }
}

/* On phones the in-page links are the page's navigation, so they get full-size tap targets. */
@media (max-width: 991px) {
  .page-title__meta {
    font-size: 0.9375rem;
  }

  .page-title__meta .link-list {
    gap: 0;
  }

  .page-title__meta a {
    display: inline-block;
    padding-block: 10px;
  }
}

/* Home hero */

.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: clamp(480px, 72vh, 720px);
  overflow: hidden;
  background: var(--night);
  color: #fff;
  isolation: isolate;
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top, rgba(18, 16, 16, 0.78), rgba(18, 16, 16, 0.38) 60%, rgba(18, 16, 16, 0.5));
}

.hero__content {
  display: grid;
  gap: var(--space-6);
  padding-block: var(--space-8) clamp(var(--space-6), 4vw, var(--space-7));
}

@media (min-width: 992px) {
  .hero__content {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gutter);
  }

  .hero__content > h1 { grid-column: 1 / 12; }
  .hero__content > .actions { grid-column: 1 / 11; }
}

.hero h1 {
  color: #fff;
}

/* Each headline line sits in its own mask, so it can rise into view. */
.hero__line {
  display: block;
  overflow: hidden;
  padding-bottom: 0.1em;
  margin-bottom: -0.1em;
}

.hero__line > span {
  display: inline-block;
}

/* The live status bar along the bottom of the hero. */
.hero__status {
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(18, 16, 16, 0.35);
}

.hero__status-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-6);
  min-height: 56px;
  padding-block: var(--space-2);
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.hero__status-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  white-space: nowrap;
}

/* A small radar scope that turns with the map's sweep, used in the status rows. */
.scope {
  flex: none;
  width: 14px;
  height: 14px;
  overflow: visible;
}

.scope circle {
  fill: none;
  stroke: var(--signal);
  stroke-width: 1.5;
}

.scope line {
  stroke: var(--signal);
  stroke-width: 1.5;
  stroke-linecap: round;
  transform-box: view-box;
  transform-origin: 8px 8px;
}

[data-seconds] {
  display: inline-block;
  min-width: 10.5em;
}

@media (max-width: 599px) {
  .hero__status-item--wide {
    display: none;
  }
}

.hero__pause {
  display: inline-flex;
  justify-content: center;
  min-width: 6.5rem;
  margin-left: auto;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: 0 var(--space-3);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: var(--radius-control);
  background: rgba(18, 16, 16, 0.4);
  color: #fff;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}

.hero__pause:hover {
  border-color: #fff;
  background: rgba(18, 16, 16, 0.7);
}

@media (min-width: 768px) {
  .hero__pause {
    min-height: 36px;
  }
}

.hero__pause .icon {
  width: 12px;
  height: 12px;
}

.hero__pause [data-video-icon="play"],
.hero__pause.is-paused [data-video-icon="pause"] {
  display: none;
}

.hero__pause.is-paused [data-video-icon="play"] {
  display: block;
}
/* Facts: a definition list of real figures, as one row or as ruled lines. */

.facts {
  display: grid;
  border-top: 1px solid var(--rule);
}

.facts__row {
  display: grid;
  gap: var(--space-1);
  padding-block: var(--space-3);
  border-bottom: 1px solid var(--rule);
}

.facts dt {
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  line-height: 1.3;
  text-transform: uppercase;
}

.facts dd {
  color: var(--ink);
  font-size: 1rem;
  line-height: 1.45;
  font-variant-numeric: lining-nums;
}

@media (min-width: 768px) {
  .facts--lines .facts__row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    gap: var(--gutter);
  }
}

.facts--strip {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--gutter);
  border-top: 0;
}

.facts--strip .facts__row {
  align-content: start;
  border-bottom: 0;
  border-top: 1px solid var(--rule);
}

/* A long code, such as the GSA contract number, gets the full width on phones so it is not cut off. */
@media (max-width: 599px) {
  .facts--strip .facts__row--wide {
    grid-column: 1 / -1;
  }
}

@media (min-width: 992px) {
  .facts--strip {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

/* Codes are digits only, so tabular figures line them up without widening any punctuation. */
.code-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-4);
  list-style: none;
  font-variant-numeric: tabular-nums lining-nums;
}

/* Index rows: a ruled list where each row names something and says what it is. */

.index {
  position: relative;
  list-style: none;
}

.index::before,
.news-list::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 1px;
  background: var(--rule-strong);
  transform-origin: left;
}

.index__row {
  display: grid;
  gap: var(--space-2) var(--gutter);
  padding-block: var(--space-5) var(--space-6);
  border-bottom: 1px solid var(--rule);
}

@media (min-width: 768px) {
  .index__row {
    grid-template-columns: minmax(0, 4fr) minmax(0, 6fr);
  }

  .index__row--data {
    grid-template-columns: minmax(0, 4fr) minmax(0, 5fr) minmax(0, 1.4fr);
  }
}

.index__name {
  color: var(--ink);
  font-size: clamp(1.25rem, 1.6vw, 1.5rem);
  font-weight: 400;
  line-height: 1.25;
  text-wrap: balance;
}

.index__text {
  display: grid;
  gap: 0.75em;
  max-width: 62ch;
  color: var(--ink-2);
}

.index__data {
  color: var(--muted);
  font-size: 0.9375rem;
  font-variant-numeric: lining-nums;
}

@media (min-width: 768px) {
  .index__data {
    text-align: right;
  }
}

.index__row a.index__name {
  text-decoration: none;
}

.index__row a.index__name:hover {
  color: var(--brand);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.2em;
}

.index-group + .index-group {
  margin-top: clamp(var(--space-7), 6vw, var(--space-9));
}

/* Icon rows: a maroon tile above each name (benefits, areas of expertise). */
.index__icon {
  display: inline-grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 6px;
  background: var(--brand);
  color: #fff;
}

.index__icon .icon {
  width: 28px;
  height: 28px;
}

@media (min-width: 768px) {
  .index--icons .index__row {
    grid-template-rows: auto 1fr;
  }

  .index--icons .index__icon {
    grid-row: 1;
    grid-column: 1;
  }

  .index--icons .index__name {
    grid-row: 2;
    grid-column: 1;
    align-self: start;
  }

  .index--icons .index__text {
    grid-row: 1 / span 2;
    grid-column: 2;
  }
}

/*
  On desktop, ruled lists in the main column (columns 4 to 12) split their rows on the
  page's own grid lines, so their second column lines up from one section to the next.
  A margin heading beside a list drops to the first row's text instead of its rule.
*/
@media (min-width: 992px) {
  .index.layout__main .index__row:not(.index__row--data),
  .facts--lines.layout__main .facts__row,
  .news-list.layout__main .news-list__row {
    grid-template-columns: repeat(9, minmax(0, 1fr));
    column-gap: var(--gutter);
  }

  .index.layout__main .index__row:not(.index__row--data) .index__name { grid-column: 1 / 5; }
  .index.layout__main .index__row:not(.index__row--data) .index__text { grid-column: 5 / -1; }
  .facts--lines.layout__main dt,
  .news-list.layout__main .news-list__date { grid-column: 1 / 4; }
  .facts--lines.layout__main dd,
  .news-list.layout__main .news-list__title { grid-column: 4 / -1; }

  .layout__margin:has(~ .index),
  .layout__margin:has(~ .news-list),
  .layout__margin:has(~ .faq) {
    padding-top: var(--space-5);
  }
}

.plain-list {
  display: grid;
  border-top: 1px solid var(--rule);
  list-style: none;
}

.plain-list li {
  padding-block: var(--space-3);
  border-bottom: 1px solid var(--rule);
  color: var(--ink);
}

@media (min-width: 768px) {
  .plain-list--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--gutter);
  }

  /* An odd last item takes the whole row, so the bottom rule closes across both columns. */
  .plain-list--2 li:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
}

/* Figures */

.figure {
  display: grid;
  gap: var(--space-3);
  align-content: start;
}

.figure img,
.figure video {
  width: 100%;
  background: var(--paper-2);
}

.figure figcaption {
  color: var(--muted);
  font-size: 0.8125rem;
  line-height: 1.45;
}

.figure--wide img {
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.figure--photo img {
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.figure--portrait img {
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

/* A photo that runs to the right edge of the window from its grid column. */
@media (min-width: 992px) {
  .figure--bleed-right {
    margin-right: calc((100vw - min(100vw, var(--page-max) + var(--page-margin) * 2)) / -2 - var(--page-margin));
  }
}

.figure--full {
  width: 100%;
}

.figure--full img {
  width: 100%;
  height: clamp(280px, 48vw, 640px);
  object-fit: cover;
}


/* People */

.people {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-7) var(--gutter);
}

@media (min-width: 768px) {
  .people {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 992px) {
  .people {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .people--lead {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.person {
  display: grid;
  gap: var(--space-3);
  align-content: start;
}

/* The headshots are near-square with the BrS mark in the top-left corner, so they are shown square. */
.person__photo {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--paper-2);
}

.person__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.person__name {
  margin-top: var(--space-2);
  color: var(--ink);
  font-size: 1.3125rem;
  font-weight: 400;
  line-height: 1.25;
}

.person__role {
  color: var(--ink-2);
  font-size: 0.9375rem;
}

.person__links {
  display: grid;
  font-size: 0.9375rem;
}

.person__links a {
  padding-block: 10px;
  overflow-wrap: anywhere;
}

/* News and articles */

.news-feature {
  display: grid;
  gap: var(--space-5);
  text-decoration: none;
}

.news-list {
  position: relative;
  list-style: none;
}

.news-list__row {
  position: relative;
  display: grid;
  gap: var(--space-2) var(--gutter);
  padding-block: var(--space-5);
  border-bottom: 1px solid var(--rule);
}

@media (min-width: 768px) {
  .news-list__row {
    grid-template-columns: minmax(0, 3fr) minmax(0, 9fr);
    align-items: baseline;
  }
}

.news-list__date {
  color: var(--muted);
  font-size: 0.875rem;
}

.news-list__title {
  color: var(--ink);
  font-size: clamp(1.1875rem, 1.6vw, 1.375rem);
  font-weight: 400;
  line-height: 1.3;
}

.news-list__title a {
  text-decoration: none;
}

/* The whole row, date included, opens the story. */
.news-list__title a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.news-list__title a:hover {
  color: var(--brand);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.2em;
}

.article {
  padding-block: clamp(var(--space-7), 7vw, var(--space-9));
}

/* Article titles run long, so they sit a step below page titles. */
.article .t-h1 {
  font-size: clamp(2.125rem, 3.6vw, 3.25rem);
}

.article__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  color: var(--muted);
  font-size: 0.875rem;
}

.article__body {
  display: grid;
  gap: var(--space-6);
}

.article-nav {
  display: grid;
  gap: var(--space-4);
  padding-top: var(--space-6);
  border-top: 1px solid var(--rule);
}

@media (min-width: 768px) {
  .article-nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .article-nav__next {
    text-align: right;
  }
}

.article-nav a {
  display: grid;
  gap: var(--space-1);
  align-content: start;
  text-decoration: none;
}

/* The first and last articles have one link, which spans the row. */
.article-nav a:only-child {
  grid-column: 1 / -1;
}

.article-nav a:hover .article-nav__title {
  color: var(--brand);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.article-nav__title {
  color: var(--ink);
  font-size: 1.0625rem;
  text-wrap: pretty;
}

/* Forms */

.form {
  display: grid;
  gap: var(--space-5);
}

.form__row {
  display: grid;
  gap: var(--space-5);
}

@media (min-width: 768px) {
  .form__row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--gutter);
  }
}

.field {
  display: grid;
  gap: var(--space-2);
}

.field__label {
  color: var(--ink);
  font-size: 0.9375rem;
  font-weight: 500;
}

.field__optional {
  color: var(--muted);
  font-weight: 400;
}

.field__input {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  border: 1px solid #8f8888;
  border-radius: var(--radius-control);
  background: var(--paper);
  color: var(--ink);
  font-size: 1rem;
  line-height: 1.4;
  transition: border-color var(--t-fast) var(--ease);
}

.field__input::placeholder {
  color: var(--muted);
}

.field__input:hover {
  border-color: var(--ink-2);
}

.field__input:focus {
  outline: 2px solid var(--ink);
  outline-offset: 1px;
  border-color: var(--ink);
}

textarea.field__input {
  min-height: 160px;
  resize: vertical;
}

.form__trap {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-note {
  color: var(--muted);
  font-size: 0.875rem;
}

.form-message {
  padding: var(--space-4) var(--space-5);
  border-left: 0;
  font-weight: 500;
}

.form-message--success {
  background: var(--paper-2);
  color: var(--ink);
}

.form-message--error {
  background: var(--paper-2);
  color: var(--brand);
}

/* Tabs and FAQ */

.tabs__list {
  display: none;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-6);
  margin-bottom: var(--space-6);
  border-bottom: 1px solid var(--rule);
}

.js .tabs__list {
  display: flex;
}

.tabs__tab {
  position: relative;
  min-height: 44px;
  padding: var(--space-2) 0;
  border: 0;
  background: transparent;
  color: var(--ink-2);
  font-size: 0.9375rem;
  font-weight: 500;
  text-align: left;
}

.tabs__tab:hover {
  color: var(--ink);
}

.tabs__tab[aria-selected="true"] {
  color: var(--ink);
}

.tabs__tab[aria-selected="true"]::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 2px;
  background: var(--brand);
}

/* On phones the tabs stack as a ruled list, so the active underline always sits under its own tab. */
@media (max-width: 767px) {
  .js .tabs__list {
    flex-direction: column;
    gap: 0;
    border-top: 1px solid var(--rule);
    border-bottom: 0;
  }

  .tabs__tab {
    border-bottom: 1px solid var(--rule);
  }
}

.tabs__panel + .tabs__panel {
  margin-top: var(--space-8);
}

.js .tabs__panel + .tabs__panel {
  margin-top: 0;
}

.js .tabs__panel:not(.is-active) {
  display: none;
}

.tabs__panel-title {
  margin-bottom: var(--space-4);
  font-size: 1.125rem;
  font-weight: 400;
}

.js .tabs__panel-title {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.faq {
  border-top: 1px solid var(--rule-strong);
}

.faq__item {
  border-bottom: 1px solid var(--rule);
}

.faq__item summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-5);
  padding-block: var(--space-5);
  color: var(--ink);
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 1.4;
  cursor: pointer;
  list-style: none;
}

.faq__item summary::-webkit-details-marker {
  display: none;
}

.faq__item summary::after {
  content: "+";
  flex: none;
  color: var(--brand);
  font-size: 1.375rem;
  font-weight: 300;
  line-height: 1;
}

.faq__item[open] summary::after {
  content: "\2212";
}

.faq__item summary:hover {
  color: var(--brand);
}

.faq__answer {
  display: grid;
  gap: 1em;
  max-width: 66ch;
  padding-bottom: var(--space-6);
  color: var(--ink-2);
}

/* Bands: at most one maroon band per page, for the block that matters most. */

.band {
  background: var(--brand);
  color: rgba(255, 255, 255, 0.86);
}

.band h2,
.band h3,
.band .index__name,
.band .facts dd {
  color: #fff;
}

.band .t-lead,
.band .t-body,
.band .index__text {
  color: rgba(255, 255, 255, 0.86);
}

.band .facts,
.band .facts__row,
.band .index,
.band .index__row,
.band .plain-list,
.band .plain-list li {
  border-color: rgba(255, 255, 255, 0.24);
}

.band .facts dt,
.band .index__data,
.band .t-caption {
  color: rgba(255, 255, 255, 0.72);
}

.band .plain-list li {
  color: #fff;
}

/*
  Range map: a radar over a USGS aerial photo of Huntsville. The rings sit at real
  distances around the office, a sweep turns while the map is on screen, and each
  place pings as the sweep passes it.
*/

.range-map {
  display: grid;
  gap: var(--space-3);
}

.range-map__frame {
  position: relative;
  border: 1px solid var(--rule);
  background: var(--paper-2);
}

.range-map svg {
  width: 100%;
  height: auto;
}

.range-map__ring {
  fill: none;
  stroke: var(--brand);
  stroke-width: 2;
}

.range-map__ring--2 { stroke-opacity: 0.8; }
.range-map__ring--3 { stroke-opacity: 0.6; }

/*
  The sweep, pings and glows are always declared and simply paused while the map is
  off screen, so they stay in step and carry on from where they were.
*/
.range-map__sweep {
  fill: var(--brand);
  opacity: 0;
  transform-box: view-box;
  animation: radar-sweep 6s linear infinite paused;
  transition: opacity 400ms var(--ease);
}

.range-map__sweep-edge {
  stroke: var(--brand);
  stroke-width: 2.5;
  filter: drop-shadow(0 0 4px var(--brand));
}

.range-map.is-live .range-map__sweep {
  opacity: 1;
}

.range-map.is-live:not(.is-paused) :is(.range-map__sweep, .range-map__ping, .range-map__place) {
  animation-play-state: running;
}

.range-map__ticks line {
  stroke: var(--brand);
  stroke-width: 1.5;
  stroke-opacity: 0.8;
}

.range-map__bearing {
  fill: var(--brand);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  font-variant-numeric: lining-nums;
}

/* The instrument readout and the Pause button sit in the frame's top corners. */
.range-map__readout,
.range-map__toggle {
  position: absolute;
  top: var(--space-3);
  margin: 0;
  padding: 6px 10px;
  border: 1px solid rgba(18, 16, 16, 0.18);
  border-radius: var(--radius-control);
  background: rgba(255, 255, 255, 0.92);
  color: var(--ink);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  line-height: 1.3;
  text-transform: uppercase;
}

.range-map__readout {
  left: var(--space-3);
  max-width: calc(100% - 10rem);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.range-map__toggle {
  right: var(--space-3);
  min-height: 32px;
}

.range-map__toggle:hover {
  border-color: var(--brand);
  color: var(--brand);
}

@keyframes radar-sweep {
  to {
    transform: rotate(360deg);
  }
}

.range-map__ping {
  fill: none;
  stroke: var(--brand);
  stroke-width: 2;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  pointer-events: none;
}

.range-map__ping {
  animation: radar-ping 6s var(--ease-out) infinite paused;
}

/* Each place glows maroon as the sweep passes, like a phosphor afterglow, then fades back. */
@keyframes radar-phosphor {
  0% {
    fill: var(--brand);
  }

  35%,
  100% {
    fill: var(--ink);
  }
}

@keyframes radar-ping {
  0% {
    opacity: 0.95;
    transform: scale(1);
  }

  22%,
  100% {
    opacity: 0;
    transform: scale(4.5);
  }
}

/* Pointing at a place draws a line to it from the office. */
.range-map__line {
  stroke: var(--brand);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  pointer-events: none;
  transition: stroke-dashoffset 450ms var(--ease-out);
}

.range-map__line.is-active {
  stroke-dashoffset: 0;
}

.range-map__ring-label {
  fill: var(--brand);
  font-size: 14px;
  font-weight: 500;
  font-variant-numeric: lining-nums;
}

.range-map__place {
  fill: var(--ink);
  stroke: var(--paper);
  stroke-width: 2;
  animation: radar-phosphor 6s linear infinite paused;
  transition: fill var(--t-fast) var(--ease);
}

.range-map__place-label {
  fill: var(--ink);
  font-size: 16px;
  transition: fill var(--t-fast) var(--ease);
}

.range-map__place.is-active,
.range-map__place-label.is-active,
.range-map__place-num.is-active {
  fill: var(--brand);
  animation: none;
}

.range-map__place-num {
  display: none;
  fill: var(--ink);
  font-size: 26px;
  font-weight: 500;
}

.range-map__office {
  fill: var(--brand);
  stroke: var(--paper);
  stroke-width: 2.5;
}

.range-map__office-label {
  fill: var(--ink);
  font-size: 17px;
  font-weight: 500;
}

.range-map__north {
  fill: var(--ink);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.06em;
}

/* A paper-colored halo keeps labels readable over the photo and the rings. */
.range-map__ring-label,
.range-map__place-label,
.range-map__place-num,
.range-map__office-label,
.range-map__north,
.range-map__bearing {
  paint-order: stroke;
  stroke: var(--paper);
  stroke-width: 8px;
  stroke-linejoin: round;
}

.range-map__legend {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
  column-gap: var(--gutter);
  margin-bottom: var(--space-3);
  border-top: 1px solid var(--rule);
  list-style: none;
  counter-reset: place;
}

.range-map__legend li {
  border-bottom: 1px solid var(--rule);
  counter-increment: place;
  transition: border-color var(--t-fast) var(--ease);
}

.range-map__pick {
  display: flex;
  gap: var(--space-3);
  width: 100%;
  min-height: 40px;
  padding: var(--space-2) 0;
  border: 0;
  background: transparent;
  color: var(--ink-2);
  font-size: 0.9375rem;
  text-align: left;
  transition: color var(--t-fast) var(--ease);
}

.range-map__legend li.is-active .range-map__pick,
.range-map__pick:hover {
  color: var(--brand);
}

.range-map__legend li.is-pinged {
  animation: legend-ping 1200ms var(--ease-out);
}

@keyframes legend-ping {
  from {
    background: rgba(112, 0, 0, 0.1);
  }
}

.range-map__legend li.is-active {
  border-bottom-color: var(--brand);
}

.range-map__pick > span:first-child {
  margin-right: auto;
}

.range-map__legend .t-num {
  flex: none;
  color: var(--ink);
  white-space: nowrap;
}

/* Partners are hollow rings that flash maroon as the sweep passes. Their list carries
   on the numbering from the landmarks above it. */
.range-map__place--partner {
  fill: var(--paper);
  stroke: var(--ink);
  stroke-width: 2.5;
  animation-name: radar-phosphor-partner;
}

@keyframes radar-phosphor-partner {
  0% {
    fill: var(--brand);
    stroke: var(--brand);
  }

  35%,
  100% {
    fill: var(--paper);
    stroke: var(--ink);
  }
}

.range-map__place--partner.is-active {
  stroke: var(--brand);
}

.range-map__group {
  margin-top: var(--space-5);
  margin-bottom: var(--space-2);
}

.range-map__legend--partners {
  counter-reset: none;
}

/*
  Below 992px the map text would be too small to read, so places get numbers
  that match the list under the map. Below 600px the map is cropped to the
  middle two thirds, which still holds every place.
*/
@media (max-width: 991px) {
  .range-map__ring {
    stroke-width: 4;
  }

  .range-map__sweep-edge,
  .range-map__ping {
    stroke-width: 4;
  }

  .range-map__line {
    stroke-width: 5;
  }

  .range-map__place-label {
    display: none;
  }

  .range-map__place-num {
    display: inline;
  }

  .range-map__place,
  .range-map__office {
    stroke: var(--paper);
    stroke-width: 3px;
    vector-effect: non-scaling-stroke;
  }

  .range-map__place--partner {
    stroke: var(--ink);
  }

  .range-map__ring-label,
  .range-map__north,
  .range-map__bearing {
    font-size: 22px;
  }

  .range-map__ticks line {
    stroke-width: 3;
  }

  .range-map__readout {
    display: none;
  }

  /* Lower at this size, so the bigger label clears the 270 bearing mark. */
  .range-map__office-label {
    font-size: 28px;
    transform: translateY(12px);
  }

  .range-map__pick::before {
    content: counter(place);
    min-width: 1.25em;
    color: var(--brand);
    font-weight: 500;
  }
}

@media (max-width: 599px) {
  .range-map__frame {
    overflow: hidden;
  }

  .range-map__frame svg {
    width: 180%;
    max-width: none;
    margin-left: -40%;
  }

  /* The crop would cut the end off the 10-mile label, so it reads leftward from the ring. */
  .range-map__ring-label--outer {
    text-anchor: end;
  }
}

/* Each ring has pathLength="100", so one dash of 100 is exactly one full ring. */
@media (prefers-reduced-motion: no-preference) {
  .js .range-map:not(.is-drawn) .range-map__ring {
    stroke-dashoffset: 100;
  }

  .js .range-map .range-map__ring {
    stroke-dasharray: 100;
    transition: stroke-dashoffset 900ms var(--ease-out) var(--ring-delay, 0ms);
  }

  .js .range-map:not(.is-drawn) .range-map__ring-label {
    opacity: 0;
  }

  .js .range-map .range-map__ring-label {
    transition: opacity var(--t-ui) var(--ease) calc(var(--ring-delay, 0ms) + 750ms);
  }
}
/* Partner logos: one static row at one height. */

.logo-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-5) var(--space-6);
  list-style: none;
}

.logo-row img {
  width: auto;
  height: 44px;
  max-width: 140px;
  object-fit: contain;
  filter: grayscale(1);
  mix-blend-mode: multiply;
}

.logo-row img.logo-row__round {
  height: 60px;
}

/* Each logo links to its organisation; keyboard focus shows its colours like hover does. */
.logo-row a {
  display: inline-flex;
  border-radius: var(--radius-control);
}

.logo-row a:focus-visible {
  outline-offset: 4px;
}

.logo-row a:focus-visible img {
  filter: none;
}

/* Status pages: 404, form sent, form not sent. */

.status {
  padding-block: clamp(var(--space-8), 10vw, var(--space-10));
}

.status__code {
  color: var(--brand);
  font-size: clamp(4rem, 12vw, 8rem);
  font-weight: 300;
  line-height: 0.9;
  letter-spacing: -0.02em;
  font-variant-numeric: lining-nums;
}

/* Third-party widgets */

.embed {
  min-height: 320px;
}

/*
  The ADP job list on Careers is built from ADP's own components, which read these
  design tokens through their shadow DOM. Flattening corners and shadows here keeps the
  widget closer to the rest of the site. If ADP renames a token, that part is ignored.
*/
recruitment-current-openings {
  --sdf-size-border-radius-sm: 0px;
  --sdf-size-border-radius-md: 0px;
  --sdf-size-border-radius-lg: 0px;
  --sdf-size-border-radius-xl: 0px;
  --sdf-size-border-radius-2xl: 0px;
  --sdf-size-border-radius-3xl: 0px;
  --sdf-size-border-radius-base: 0px;
  --sdf-size-border-radius-full: 2px;
  --sdf-depth-shadow-2: 0 0 #0000;
  --sdf-depth-shadow-4: 0 0 #0000;
  --sdf-depth-shadow-8: 0 0 #0000;
  --sdf-depth-shadow-16: 0 0 #0000;
  --sdf-depth-shadow-24: 0 0 #0000;
  --sdf-depth-shadow-default: 0 0 #0000;
  --sdf-depth-shadow-md: 0 0 #0000;
  --sdf-depth-shadow-lg: 0 0 #0000;
  --sdf-depth-shadow-xl: 0 0 #0000;
  --sdf-depth-shadow-2xl: 0 0 #0000;
}

.map-frame {
  aspect-ratio: 4 / 3;
  background: var(--paper-2);
}

.map-frame iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

/*
  Motion. Everything here is skipped for visitors whose device asks for reduced
  motion, and without JavaScript every element is simply in place.
*/

@media (prefers-reduced-motion: no-preference) {
  /* Home hero: the video settles, the headline rises line by line, then the rest. */
  .js .hero__media {
    animation: hero-settle 2600ms var(--ease-out) both;
  }

  .js .hero__line > span {
    animation: line-rise 1100ms var(--ease-out) both;
    animation-delay: calc(250ms + var(--line, 0) * 120ms);
  }

  .js .hero__content .actions,
  .js .hero__status {
    animation: fade-rise 900ms var(--ease-out) 750ms both;
  }

  .scope line {
    animation: radar-sweep 6s linear infinite;
  }

  /* Inner page titles and articles arrive as the page loads, and the title rule draws in. */
  .js .page-title__status {
    animation: fade-rise 900ms var(--ease-out) both;
  }

  .js .page-title__media {
    animation: hero-settle 2600ms var(--ease-out) both;
  }

  .js .page-title h1,
  .js .article h1,
  .js .status h1,
  .js .status__code {
    animation: fade-rise 900ms var(--ease-out) 80ms both;
  }

  .js .page-title .t-lead,
  .js .page-title__extra,
  .js .page-title__meta,
  .js .article__meta,
  .js .status .t-lead,
  .js .status .actions,
  .js .status .stack > .button {
    animation: fade-rise 900ms var(--ease-out) 240ms both;
  }

  .js .page-title__inner::after {
    animation: rule-draw 1300ms var(--ease-out) 200ms both;
  }

  /* Scroll reveals, set up by site.js. */
  .has-reveals [data-reveal] {
    transition: opacity 800ms var(--ease-out), transform 1000ms var(--ease-out);
    transition-delay: var(--reveal-delay, 0ms);
  }

  .has-reveals .reveal-init,
  .has-reveals .reveal-init img,
  .has-reveals .reveal-init figcaption,
  .has-reveals .reveal-init::before {
    transition: none !important;
  }

  .has-reveals [data-reveal="rise"]:not(.is-revealed) {
    opacity: 0;
    transform: translateY(0.45em);
  }

  .has-reveals [data-reveal="fade"]:not(.is-revealed),
  .has-reveals [data-reveal="row"]:not(.is-revealed) {
    opacity: 0;
    transform: translateY(20px);
  }

  .has-reveals [data-reveal="wipe"] img {
    transition: clip-path 1200ms var(--ease-out);
  }

  .has-reveals [data-reveal="wipe"]:not(.is-revealed) img {
    clip-path: inset(0 100% 0 0);
  }

  .has-reveals [data-reveal="wipe"] figcaption {
    transition: opacity 600ms var(--ease) 600ms;
  }

  .has-reveals [data-reveal="wipe"]:not(.is-revealed) figcaption {
    opacity: 0;
  }

  .has-reveals [data-reveal="rule"]::before {
    transition: transform 1200ms var(--ease-out);
  }

  .has-reveals [data-reveal="rule"]:not(.is-revealed)::before {
    transform: scaleX(0);
  }

  /* Large photos pan slowly inside their frame as the page scrolls past them. */
  @supports (animation-timeline: view()) {
    .figure--full img,
    .figure--bleed-right img {
      animation: photo-pan linear both;
      animation-timeline: view();
    }
  }

  /* Pages slide into each other instead of flashing. */
  @view-transition {
    navigation: auto;
  }

  ::view-transition-old(root) {
    animation: page-out 200ms var(--ease) both;
  }

  ::view-transition-new(root) {
    animation: page-in 420ms var(--ease-out) both;
  }
}

@keyframes hero-settle {
  from {
    transform: scale(1.08);
  }
}

@keyframes line-rise {
  from {
    transform: translateY(105%);
  }
}

@keyframes fade-rise {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
}

@keyframes rule-draw {
  from {
    transform: scaleX(0);
  }
}

@keyframes photo-pan {
  from {
    object-position: 50% 20%;
  }

  to {
    object-position: 50% 80%;
  }
}

@keyframes page-out {
  to {
    opacity: 0;
    transform: translateY(-10px);
  }
}

@keyframes page-in {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
}

/* Small hover touches: logos take their own colors, service names lean in. */
.logo-row img {
  transition: filter 300ms var(--ease);
}

.logo-row li:hover img {
  filter: none;
}

.index__name {
  transition: color var(--t-ui) var(--ease), transform var(--t-ui) var(--ease-out);
}

@media (hover: hover) {
  .index__row:hover .index__name {
    color: var(--brand);
    transform: translateX(6px);
  }
}

/* Utilities */

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

[hidden] {
  display: none !important;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
  }
}

@media print {
  .site-header,
  .mobile-menu,
  .skip-link,
  .hero__pause,
  .hero__media {
    display: none !important;
  }

  .hero {
    min-height: 0;
    background: none;
    color: var(--ink);
  }

  .hero::before {
    content: none;
  }

  .hero h1 {
    color: var(--ink);
  }

  .hero__status {
    display: none;
  }

  /* Print everything as it ends up on screen, whatever has or has not scrolled into view. */
  [data-reveal],
  [data-reveal] img,
  [data-reveal] figcaption {
    opacity: 1 !important;
    clip-path: none !important;
    transform: none !important;
  }
}