/*
 * Ported from the prototype's Footer.module.css (the base half; Figma 2937:8907 at 1728 wide,
 * sizes scale with the window above floors). The gutter is the standard one, capped to
 * --content-width, whatever the page sets. A code component's Shadow DOM has no page reset, so
 * box-sizing is set here (see Hero.module.css).
 */
.MXtus134DS2wrEDs2ROV,
.MXtus134DS2wrEDs2ROV *,
.MXtus134DS2wrEDs2ROV *::before,
.MXtus134DS2wrEDs2ROV *::after {
  box-sizing: border-box;
}

/*
 * Hidden until the page has loaded (data-ready, set in Footer.tsx), so it never shows at the top of the window
 * while the client-only components above it have not yet taken their room. A timed fallback shows it regardless.
 */
.MXtus134DS2wrEDs2ROV:not([data-ready]) {
  visibility: hidden;
  animation: yF8Vks973bNiOMJKVb6O 0s linear 4s forwards;
}

@keyframes yF8Vks973bNiOMJKVb6O {
  to {
    visibility: visible;
  }
}

/* Soft black, 120px over and 80px under, in the page gutter. */
.MXtus134DS2wrEDs2ROV {
  --page-gutter: max(var(--page-gutter-min), (100vw - var(--content-width)) / 2);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: max(48px, 4.98vw);
  overflow: hidden;
  padding: max(72px, 6.94vw) var(--page-gutter) max(48px, 4.63vw);
  background: var(--background-inverse, #171717);
  color: var(--text-inverse);
  font-family: var(--type-family-base, 'Raleway', system-ui, sans-serif);
}

/* Covers the section from its top left, scaling with its width (not under 1400px, where it crowds the content). */
.H6loC96d9_72qGMQ5ddw {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  overflow: visible;
  pointer-events: none;
}

.H6loC96d9_72qGMQ5ddw line {
  stroke: #595959;
  stroke-width: 1;
  stroke-dasharray: 2 2;
  vector-effect: non-scaling-stroke;
}

.H6loC96d9_72qGMQ5ddw rect {
  fill: #fff;
}

.O6xoXZxSbLs67JfdY7A7 {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 56px 32px;
}

.qlyhSlMujAeUZRd14tm5 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
  max-width: min(457px, 100%);
}

.Q50myWJrCdcY1FP3c1OV {
  display: block;
  width: 212px;
  max-width: 100%;
}

.Q50myWJrCdcY1FP3c1OV img {
  display: block;
  width: 100%;
  height: auto;
}

/*
 * Keyboard focus on the logo and the footer links: a 2px brand-blue ring drawn round them with
 * room on each side (more on the left and right) and rounded corners, in place of the default outline.
 */
.Q50myWJrCdcY1FP3c1OV,
.Nwwwk80teJxvpmecuNF7 a {
  position: relative;
}

.Q50myWJrCdcY1FP3c1OV:focus-visible,
.Nwwwk80teJxvpmecuNF7 a:focus-visible {
  outline: none;
}

.Q50myWJrCdcY1FP3c1OV:focus-visible::after,
.Nwwwk80teJxvpmecuNF7 a:focus-visible::after {
  content: '';
  position: absolute;
  inset: -10px -16px;
  border: 2px solid var(--action-primary-default);
  border-radius: 12px;
  pointer-events: none;
}

.Nwwwk80teJxvpmecuNF7 a:focus-visible::after {
  inset: -8px -14px;
  border-radius: 10px;
}

.FyQUlIhVeA8FPEOraHe0 {
  margin: 0;
  overflow-wrap: anywhere;
  font-size: var(--type-large-size);
  line-height: var(--type-large-lh);
  font-weight: var(--type-large-weight);
  letter-spacing: var(--type-large-ls);
}

.LDpZUexKKVyfuBRJsA2l {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  margin: 0;
  padding: 19px 0 0;
  list-style: none;
}

.LDpZUexKKVyfuBRJsA2l a {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  color: #fff;
  transition:
    background-color 250ms ease,
    color 250ms ease,
    scale 350ms cubic-bezier(0.22, 1, 0.36, 1);
}

.LDpZUexKKVyfuBRJsA2l a:hover,
.LDpZUexKKVyfuBRJsA2l a:focus-visible {
  background: #fff;
  color: var(--background-inverse, #171717);
  scale: 1.06;
}

.LDpZUexKKVyfuBRJsA2l a:focus-visible {
  outline: 2px solid var(--action-primary-default);
  outline-offset: 3px;
}

/*
 * One list of links in two balanced columns: it fills the first column top to bottom, then the second
 * (--rows, set by the component, is half the count rounded up), so the DOM order is the reading order.
 * 21px, 40px between the rows.
 */
.Nwwwk80teJxvpmecuNF7 {
  max-width: 100%;
}

.Nwwwk80teJxvpmecuNF7 ul {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(var(--rows, 1), auto);
  grid-template-columns: repeat(var(--cols, 2), minmax(0, max-content));
  gap: 40px max(56px, 5.09vw);
  margin: 0;
  padding: 0;
  list-style: none;
}

.Nwwwk80teJxvpmecuNF7 a {
  color: inherit;
  font-weight: var(--type-nav-large-weight);
  font-size: max(17px, 1.215vw);
  line-height: 1.2;
  letter-spacing: 0.02em;
  overflow-wrap: anywhere;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 1px;
  text-underline-offset: 6px;
  transition: text-decoration-color 250ms ease;
}

.Nwwwk80teJxvpmecuNF7 a:hover,
.Nwwwk80teJxvpmecuNF7 a:focus-visible {
  text-decoration-color: currentColor;
}

.vTwzNG8wuJmiXnyRAHwA {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.YlZ8abCtMGdfHZAlioeY,
.sJXztnXEc248UOX6IYRX {
  margin: 0;
  overflow-wrap: anywhere;
  font-size: var(--type-small-size);
  line-height: var(--type-small-lh);
  letter-spacing: var(--type-small-ls);
  text-align: right;
  font-weight: var(--type-small-weight);
}

/* A button that reads as a link in the sentence: the text's own type, underlined, with the footer's focus ring. */
.V7JTn7HPVoiIsmO4iV0g {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.V7JTn7HPVoiIsmO4iV0g:hover {
  text-decoration-thickness: 2px;
}

.V7JTn7HPVoiIsmO4iV0g:focus-visible {
  outline: 2px solid var(--action-primary-default);
  outline-offset: 3px;
  border-radius: 4px;
}

@media (max-width: 820px) {
  .Nwwwk80teJxvpmecuNF7 ul {
    gap: 24px 48px;
  }

  .YlZ8abCtMGdfHZAlioeY,
  .sJXztnXEc248UOX6IYRX {
    text-align: left;
  }
}

/* Phones: the top on the section spacing scale (the bottom's 48px already is). */
@media (max-width: 767px) {
  .MXtus134DS2wrEDs2ROV {
    padding-top: var(--section-space-lg, 64px);
  }
}

/* Up to 1400px: the lines crowd the content. */
@media (max-width: 1400px) {
  .H6loC96d9_72qGMQ5ddw {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .LDpZUexKKVyfuBRJsA2l a,
  .Nwwwk80teJxvpmecuNF7 a {
    transition: none;
  }

  .LDpZUexKKVyfuBRJsA2l a:hover,
  .LDpZUexKKVyfuBRJsA2l a:focus-visible {
    scale: none;
  }
}