/* Source style section 6 */

/* ---- primary CTAs: 22% less saturated than the raw brand red ---- */
:root {
  --orange-btn: #c8463c;
}
.btn-primary,
.exp-side .map-link {
  background: var(--orange-btn);
}

/* Source style section 7 */

/* The 460px globe column doesn't fit on tablets: the summary stacks and the
   globe is centred. */
@media (max-width: 1000px) {
  .cont-grid {
    grid-template-columns: 1fr;
    gap: 22px;
  }
}
@media (min-width: 641px) and (max-width: 1000px) {
  .globe-wrap {
    width: min(340px, 100%);
    max-width: none;
    margin: 14px auto 4px;
    height: auto;
    aspect-ratio: 1/1;
    min-height: 0;
  }
  .globe-hint {
    bottom: -4px;
  }
}

/* Source style section 8 */

/* =============================================================
   Colour vision correction
   html[data-cb]: off | protan | deuter | tritan | achroma
   Daltonisation (LMS-based), matrices built in the script below.
   ============================================================= */

/* Filter goes on each direct child of body, not on body/html: a filtered
   ancestor becomes the containing block for position:fixed and would break
   the sticky nav, back-to-top button and intro overlay. */
html[data-cb='protan'] body > * {
  filter: url(#td-cb-protan);
}
html[data-cb='deuter'] body > * {
  filter: url(#td-cb-deuter);
}
html[data-cb='tritan'] body > * {
  filter: url(#td-cb-tritan);
}
html[data-cb='achroma'] body > * {
  filter: grayscale(1) contrast(1.08);
}
html[data-cb]:not([data-cb='off']) #td-cb-defs {
  filter: none;
}

/* Same issue in fullscreen: .dash.expanded is position:fixed, so while it's
   open the filter is moved from the ancestors to the panel itself. */
@media (min-width: 761px) {
  /* Above the mobile breakpoint only (below it .dash.expanded is static). */
  html[data-cb]:not([data-cb='off']) body.dash-open > * {
    filter: none;
  }
  html[data-cb='protan'] body.dash-open .dash.expanded {
    filter: url(#td-cb-protan);
  }
  html[data-cb='deuter'] body.dash-open .dash.expanded {
    filter: url(#td-cb-deuter);
  }
  html[data-cb='tritan'] body.dash-open .dash.expanded {
    filter: url(#td-cb-tritan);
  }
  html[data-cb='achroma'] body.dash-open .dash.expanded {
    filter: grayscale(1) contrast(1.08);
  }
}

/* colour is never the only signal, whatever the mode */
html[data-cb]:not([data-cb='off']) .ds-item,
html[data-cb]:not([data-cb='off']) .cbtn {
  position: relative;
}
html[data-cb]:not([data-cb='off']) .ds-item.on::after,
html[data-cb]:not([data-cb='off']) .cbtn.on::after {
  content: '';
  position: absolute;
  left: 0;
  top: 12%;
  bottom: 12%;
  width: 3px;
  border-radius: 2px;
  background: currentColor;
}
html[data-cb]:not([data-cb='off']) .tsub button.on {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Nav layout: links are taken out of the flex flow so they stay centred
   regardless of what's on either side. */
@media (min-width: 761px) {
  /* brand keeps the left edge, menu and the control sit together on the right */
  nav .nav-in {
    justify-content: flex-start;
    gap: 18px;
  }
  nav .nav-in > .nav-links {
    margin: 0 0 0 auto;
  }
  nav .nav-in > .td-a11y {
    margin: 0;
  }
  /* Between 761 and 900px the burger is visible; the control sits next to
     it. */
  nav .nav-in > .burger {
    margin-left: auto;
  }
}
@media (min-width: 761px) and (max-width: 900px) {
  nav .nav-in > .td-a11y {
    margin-left: auto;
  }
  nav .nav-in > .burger {
    margin-left: -10px;
  }
}

/* =============================================================
   the control  \00B7   same HUD language as the viewer toolbar
   ============================================================= */
/* Trigger uses the same pill as the nav links (one control group). */
.td-a11y {
  position: relative;
  flex: none;
  display: flex;
  align-items: center;
  background: var(--fill);
  border-radius: 99px;
  padding: 3px;
}
.td-a11y-btn {
  position: relative;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  cursor: pointer;
  border: none;
  padding: 0;
  background: transparent;
  color: var(--muted);
  border-radius: 99px;
  transition:
    color 0.28s cubic-bezier(0.3, 0.8, 0.35, 1),
    background 0.28s cubic-bezier(0.3, 0.8, 0.35, 1),
    box-shadow 0.28s cubic-bezier(0.3, 0.8, 0.35, 1);
}
.td-a11y-btn:hover {
  background: rgba(255, 255, 255, 0.055);
  color: var(--ink);
}
.td-a11y-btn:active {
  transform: scale(0.97);
}
.td-a11y.open .td-a11y-btn {
  background: var(--fill2);
  color: var(--ink);
  box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.12);
}
.td-a11y.on .td-a11y-btn {
  background: rgba(226, 59, 46, 0.22);
  color: #ffd9cf;
  box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.16);
}
/* a live dot marks that a correction is running */
.td-a11y.on .td-a11y-btn::after {
  content: '';
  position: absolute;
  top: 3px;
  right: 3px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #ffd9cf;
  box-shadow: 0 0 6px #e23b2e;
}

.td-a11y-pop {
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  z-index: 200;
  width: 246px;
  padding: 14px;
  border-radius: 11px;
  background: rgba(226, 59, 46, 0.2);
  opacity: 0;
  transform: translateY(-8px) scale(0.97);
  transform-origin: top right;
  pointer-events: none;
  transition:
    opacity 0.18s ease,
    transform 0.24s cubic-bezier(0.2, 0.9, 0.3, 1);
}
.td-a11y-pop::before {
  content: '';
  position: absolute;
  inset: 0.5px;
  z-index: 0;
  border-radius: 10.5px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01)),
    linear-gradient(180deg, rgba(26, 15, 16, 0.97), rgba(18, 10, 11, 0.98));
  -webkit-backdrop-filter: saturate(170%) blur(20px);
  backdrop-filter: saturate(170%) blur(20px);
}
.td-a11y-pop > * {
  position: relative;
  z-index: 1;
}
.td-a11y.open .td-a11y-pop {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.td-a11y-pop h5 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 11px;
  font:
    700 9.5px/1 JetBrains Mono,
    ui-monospace,
    'SF Mono',
    'IBM Plex Mono',
    Menlo,
    monospace;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 199, 184, 0.72);
}
.td-a11y-pop h5 span {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(226, 59, 46, 0.4), transparent);
}

.td-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.td-list button.opt {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  cursor: pointer;
  border: none;
  padding: 8px 10px;
  background: transparent;
  font:
    600 12.5px Manrope,
    system-ui,
    -apple-system,
    sans-serif;
  color: var(--muted);
  border-radius: 99px;
  transition:
    background 0.16s ease,
    color 0.16s ease;
}
.td-list button.opt:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--ink);
}
.td-list button.opt[aria-pressed='true'] {
  background: rgba(226, 59, 46, 0.2);
  color: #ffd9cf;
}
/* the badge carries the mode code, so the row reads without colour */
.td-list button.opt b {
  flex: none;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  color: var(--tert);
  background: rgba(255, 255, 255, 0.05);
  border-radius: 99px;
  box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.09);
  transition:
    background 0.16s ease,
    color 0.16s ease;
}
.td-list button.opt b svg {
  display: block;
}
.td-list button.opt:hover b {
  color: var(--ink);
}
.td-list button.opt[aria-pressed='true'] b {
  background: rgba(226, 59, 46, 0.34);
  color: #ffd9cf;
  box-shadow: none;
}
.td-list button.opt span {
  flex: 1;
  min-width: 0;
}
.td-list button.opt em {
  font-style: normal;
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--tert);
  opacity: 0;
  transition: opacity 0.16s ease;
}
.td-list button.opt:hover em,
.td-list button.opt[aria-pressed='true'] em {
  opacity: 1;
}

@media (max-width: 760px) {
  /* Negative margin to offset nav-in's flex gap next to the burger. */
  nav .nav-in {
    gap: 8px;
  }
  .td-a11y {
    margin-left: auto;
    margin-right: 0;
  }
  /* nav carries transform:translateZ(0), so it is the containing block for
     anything fixed inside it; the panel therefore stays absolute here */
  .td-a11y-pop {
    right: -4px;
    width: min(258px, calc(100vw - 26px));
  }
}

/* Source style section 9 */

/* ---------- hero ---------- */
.hero.hb {
  padding: 0;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: clamp(540px, calc(100vh - 210px), 700px);
  padding-bottom: 14px;
}
/* scroll cue */
.hb .scroll-cue {
  position: relative;
  z-index: 3;
  margin-top: 0;
}
.hb .scroll-cue.rv.in {
  opacity: calc(1 - var(--hp, 0) * 3);
}
/* backdrop */
.hero.hb::before {
  content: '';
  display: block;
  position: absolute;
  inset: 0;
  top: 0;
  left: 0;
  width: auto;
  height: auto;
  transform: none;
  border-radius: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(
      80% 60% at 12% 0%,
      rgba(44, 74, 160, 0.12) 0%,
      rgba(44, 74, 160, 0.1152) 7.44%,
      rgba(44, 74, 160, 0.1012) 15.5%,
      rgba(44, 74, 160, 0.0812) 23.56%,
      rgba(44, 74, 160, 0.06) 31%,
      rgba(44, 74, 160, 0.0388) 38.44%,
      rgba(44, 74, 160, 0.0187) 46.5%,
      rgba(44, 74, 160, 0.0048) 54.56%,
      rgba(44, 74, 160, 0) 62%
    ),
    linear-gradient(
      180deg,
      rgba(4, 6, 11, 0.55) 0%,
      rgba(11, 8, 13, 0.55) 46%,
      rgba(10, 13, 22, 0) 100%
    );
  -webkit-mask-image: linear-gradient(
    180deg,
    #000 62%,
    rgba(0, 0, 0, 0.96) 66.56%,
    rgba(0, 0, 0, 0.844) 71.5%,
    rgba(0, 0, 0, 0.677) 76.44%,
    rgba(0, 0, 0, 0.5) 81%,
    rgba(0, 0, 0, 0.323) 85.56%,
    rgba(0, 0, 0, 0.156) 90.5%,
    rgba(0, 0, 0, 0.04) 95.44%,
    transparent 100%
  );
  mask-image: linear-gradient(
    180deg,
    #000 62%,
    rgba(0, 0, 0, 0.96) 66.56%,
    rgba(0, 0, 0, 0.844) 71.5%,
    rgba(0, 0, 0, 0.677) 76.44%,
    rgba(0, 0, 0, 0.5) 81%,
    rgba(0, 0, 0, 0.323) 85.56%,
    rgba(0, 0, 0, 0.156) 90.5%,
    rgba(0, 0, 0, 0.04) 95.44%,
    transparent 100%
  );
}
/* hero copy waits for the map: both start at boot (JS adds .hb-go) */
.hero.hb:not(.hb-go) .hb-copy .rv.in {
  opacity: 0;
  transform: translate3d(0, 20px, 0);
}
.hero.hb:not(.hb-go) .hb-copy h1.in .wsplit > i {
  opacity: 0;
  transform: translateY(110%);
}
.hero.hb.hb-go .hb-copy .kicker {
  transition-delay: 0.05s;
}
.hero.hb.hb-go .hb-copy h1 {
  transition-delay: 0.1s;
}
.hero.hb.hb-go .hb-copy .wsplit > i {
  transition-delay: calc(0.1s + var(--w, 0) * 55ms);
}
.hero.hb.hb-go .hb-copy p {
  transition-delay: 0.28s;
}
.hero.hb.hb-go .hb-copy .hb-cta {
  transition-delay: 0.4s;
}
/* map glow: fades in with the map (JS adds .hb-on at boot) */
.hero.hb::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(
      42% 26% at 64% 31%,
      rgba(255, 124, 74, 0.12) 0%,
      rgba(255, 124, 74, 0.1152) 8.64%,
      rgba(255, 124, 74, 0.1012) 18%,
      rgba(255, 124, 74, 0.0812) 27.36%,
      rgba(255, 124, 74, 0.06) 36%,
      rgba(255, 124, 74, 0.0388) 44.64%,
      rgba(255, 124, 74, 0.0187) 54%,
      rgba(255, 124, 74, 0.0048) 63.36%,
      rgba(255, 124, 74, 0) 72%
    ),
    radial-gradient(
      68% 52% at 64% 40%,
      rgba(150, 32, 24, 0.18) 0%,
      rgba(150, 32, 24, 0.1728) 8.88%,
      rgba(150, 32, 24, 0.1519) 18.5%,
      rgba(150, 32, 24, 0.1218) 28.12%,
      rgba(150, 32, 24, 0.09) 37%,
      rgba(150, 32, 24, 0.0582) 45.88%,
      rgba(150, 32, 24, 0.0281) 55.5%,
      rgba(150, 32, 24, 0.0072) 65.12%,
      rgba(150, 32, 24, 0) 74%
    );
  -webkit-mask-image: linear-gradient(
    180deg,
    #000 62%,
    rgba(0, 0, 0, 0.96) 66.56%,
    rgba(0, 0, 0, 0.844) 71.5%,
    rgba(0, 0, 0, 0.677) 76.44%,
    rgba(0, 0, 0, 0.5) 81%,
    rgba(0, 0, 0, 0.323) 85.56%,
    rgba(0, 0, 0, 0.156) 90.5%,
    rgba(0, 0, 0, 0.04) 95.44%,
    transparent 100%
  );
  mask-image: linear-gradient(
    180deg,
    #000 62%,
    rgba(0, 0, 0, 0.96) 66.56%,
    rgba(0, 0, 0, 0.844) 71.5%,
    rgba(0, 0, 0, 0.677) 76.44%,
    rgba(0, 0, 0, 0.5) 81%,
    rgba(0, 0, 0, 0.323) 85.56%,
    rgba(0, 0, 0, 0.156) 90.5%,
    rgba(0, 0, 0, 0.04) 95.44%,
    transparent 100%
  );
  opacity: 0;
  transition: opacity 1.8s cubic-bezier(0.4, 0, 0.2, 1) 0.15s;
}
.hero.hb.hb-on::after {
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .hero.hb::after {
    transition: none;
  }
}
/* stage: fades; canvas moves on scroll */
.hb-stage {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
  -webkit-mask-image:
    linear-gradient(90deg, rgba(0, 0, 0, 0.08) 0%, rgba(0, 0, 0, 0.2) 34%, #000 64%),
    linear-gradient(
      180deg,
      #000 58%,
      rgba(0, 0, 0, 0.96) 62.56%,
      rgba(0, 0, 0, 0.844) 67.5%,
      rgba(0, 0, 0, 0.677) 72.44%,
      rgba(0, 0, 0, 0.5) 77%,
      rgba(0, 0, 0, 0.323) 81.56%,
      rgba(0, 0, 0, 0.156) 86.5%,
      rgba(0, 0, 0, 0.04) 91.44%,
      transparent 96%
    );
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(90deg, rgba(0, 0, 0, 0.08) 0%, rgba(0, 0, 0, 0.2) 34%, #000 64%),
    linear-gradient(
      180deg,
      #000 58%,
      rgba(0, 0, 0, 0.96) 62.56%,
      rgba(0, 0, 0, 0.844) 67.5%,
      rgba(0, 0, 0, 0.677) 72.44%,
      rgba(0, 0, 0, 0.5) 77%,
      rgba(0, 0, 0, 0.323) 81.56%,
      rgba(0, 0, 0, 0.156) 86.5%,
      rgba(0, 0, 0, 0.04) 91.44%,
      transparent 96%
    );
  mask-composite: intersect;
}
.hb-cv {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}
.hb-in {
  position: relative;
  z-index: 2;
  flex: 1;
  display: flex;
  align-items: center;
  width: 100%;
  padding-block: clamp(16px, 3vh, 32px) clamp(24px, 4vh, 48px);
}
.hb-copy {
  max-width: 580px;
}
/* type */
.hb .kicker {
  margin-bottom: 14px;
}
.hb h1 {
  font-size: clamp(38px, 4.6vw, 60px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.06;
  margin-bottom: 18px;
  max-width: 600px;
}
.hb p {
  color: var(--muted);
  font-size: 16px;
  line-height: 1.65;
  max-width: 50ch;
  margin: 0;
}
.hb-cta {
  display: flex;
  align-items: center;
  gap: 26px;
  margin-top: 30px;
  flex-wrap: wrap;
}
.hb-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 15px;
  line-height: 20px;
  color: var(--ink);
  opacity: 0.86;
  transition: opacity 0.2s ease;
}
.hb-link svg {
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
  margin-left: -1px;
  position: relative;
  top: 0.045em;
  transition: transform 0.25s cubic-bezier(0.2, 0.7, 0.25, 1);
}
.hb-link:hover {
  opacity: 1;
}
.hb-link:hover svg {
  transform: translateX(4px);
}
/* facts */
.hb-facts {
  position: relative;
  display: inline-flex;
  margin-top: 44px;
  max-width: 100%;
}
.hb-f {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0 30px;
  opacity: 0;
  transform: translateY(8px);
  animation: hbIn 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
  animation-delay: calc(var(--d, 0.9s) + var(--i, 0) * 90ms);
}
.hb-f:first-child {
  padding-left: 0;
}
.hb-f:last-child {
  padding-right: 0;
}
.hb-f + .hb-f::before {
  content: '';
  position: absolute;
  left: 0;
  top: -6px;
  bottom: -6px;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(255, 150, 110, 0.45), transparent);
}
.hb-f b {
  font:
    600 19px JetBrains Mono,
    ui-monospace,
    'SF Mono',
    'IBM Plex Mono',
    Menlo,
    monospace;
  color: var(--ink);
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.hb-f b i {
  font-style: normal;
  font-size: 12px;
  font-weight: 600;
  color: #ffc7b8;
  margin-left: 4px;
}
.hb-f > span {
  font:
    600 9.5px JetBrains Mono,
    ui-monospace,
    'SF Mono',
    Menlo,
    monospace;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tert);
  white-space: nowrap;
}
@keyframes hbIn {
  to {
    opacity: 1;
    transform: none;
  }
}
/* scroll: --hp 0..1 (JS, desktop) */
.hb-cv {
  will-change: transform, opacity;
  transform: translate3d(0, calc(var(--hp, 0) * 110px), 0);
  opacity: calc(1 - var(--hp, 0) * 0.85);
}
.hb-in {
  will-change: transform, opacity;
  transform: translate3d(0, calc(var(--hp, 0) * -50px), 0);
  opacity: calc(1 - var(--hp, 0) * 1.5);
}
/* heading rule */
.sec-head h2::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -12px;
  width: 72px;
  height: 1px;
  background: linear-gradient(90deg, rgba(255, 150, 110, 0.85), rgba(226, 59, 46, 0));
  box-shadow: 0 0 8px rgba(226, 59, 46, 0.5);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1.1s cubic-bezier(0.2, 0.8, 0.2, 1) 0.25s;
}
@media (max-width: 900px) {
  .hero.hb {
    min-height: 0;
    background: none;
  }
  .hb-in {
    padding-block: 32px 0;
    order: -1;
  } /* copy first */
  /* stacked layout */
  .hero.hb::before {
    background:
      radial-gradient(
        90% 40% at 10% 0%,
        rgba(44, 74, 160, 0.12) 0%,
        rgba(44, 74, 160, 0.1152) 7.44%,
        rgba(44, 74, 160, 0.1012) 15.5%,
        rgba(44, 74, 160, 0.0812) 23.56%,
        rgba(44, 74, 160, 0.06) 31%,
        rgba(44, 74, 160, 0.0388) 38.44%,
        rgba(44, 74, 160, 0.0187) 46.5%,
        rgba(44, 74, 160, 0.0048) 54.56%,
        rgba(44, 74, 160, 0) 62%
      ),
      linear-gradient(
        180deg,
        rgba(4, 6, 11, 0.55) 0%,
        rgba(11, 8, 13, 0.55) 55%,
        rgba(10, 13, 22, 0) 100%
      );
    -webkit-mask-image: linear-gradient(
      180deg,
      #000 80%,
      rgba(0, 0, 0, 0.96) 82.4%,
      rgba(0, 0, 0, 0.844) 85%,
      rgba(0, 0, 0, 0.677) 87.6%,
      rgba(0, 0, 0, 0.5) 90%,
      rgba(0, 0, 0, 0.323) 92.4%,
      rgba(0, 0, 0, 0.156) 95%,
      rgba(0, 0, 0, 0.04) 97.6%,
      transparent 100%
    );
    mask-image: linear-gradient(
      180deg,
      #000 80%,
      rgba(0, 0, 0, 0.96) 82.4%,
      rgba(0, 0, 0, 0.844) 85%,
      rgba(0, 0, 0, 0.677) 87.6%,
      rgba(0, 0, 0, 0.5) 90%,
      rgba(0, 0, 0, 0.323) 92.4%,
      rgba(0, 0, 0, 0.156) 95%,
      rgba(0, 0, 0, 0.04) 97.6%,
      transparent 100%
    );
  }
  .hero.hb::after {
    background:
      radial-gradient(
        60% 18% at 50% 74%,
        rgba(255, 124, 74, 0.12) 0%,
        rgba(255, 124, 74, 0.1152) 8.64%,
        rgba(255, 124, 74, 0.1012) 18%,
        rgba(255, 124, 74, 0.0812) 27.36%,
        rgba(255, 124, 74, 0.06) 36%,
        rgba(255, 124, 74, 0.0388) 44.64%,
        rgba(255, 124, 74, 0.0187) 54%,
        rgba(255, 124, 74, 0.0048) 63.36%,
        rgba(255, 124, 74, 0) 72%
      ),
      radial-gradient(
        90% 34% at 50% 78%,
        rgba(150, 32, 24, 0.18) 0%,
        rgba(150, 32, 24, 0.1728) 8.88%,
        rgba(150, 32, 24, 0.1519) 18.5%,
        rgba(150, 32, 24, 0.1218) 28.12%,
        rgba(150, 32, 24, 0.09) 37%,
        rgba(150, 32, 24, 0.0582) 45.88%,
        rgba(150, 32, 24, 0.0281) 55.5%,
        rgba(150, 32, 24, 0.0072) 65.12%,
        rgba(150, 32, 24, 0) 74%
      );
    -webkit-mask-image: linear-gradient(
      180deg,
      #000 80%,
      rgba(0, 0, 0, 0.96) 82.4%,
      rgba(0, 0, 0, 0.844) 85%,
      rgba(0, 0, 0, 0.677) 87.6%,
      rgba(0, 0, 0, 0.5) 90%,
      rgba(0, 0, 0, 0.323) 92.4%,
      rgba(0, 0, 0, 0.156) 95%,
      rgba(0, 0, 0, 0.04) 97.6%,
      transparent 100%
    );
    mask-image: linear-gradient(
      180deg,
      #000 80%,
      rgba(0, 0, 0, 0.96) 82.4%,
      rgba(0, 0, 0, 0.844) 85%,
      rgba(0, 0, 0, 0.677) 87.6%,
      rgba(0, 0, 0, 0.5) 90%,
      rgba(0, 0, 0, 0.323) 92.4%,
      rgba(0, 0, 0, 0.156) 95%,
      rgba(0, 0, 0, 0.04) 97.6%,
      transparent 100%
    );
  }
  .hb-stage {
    position: relative;
    inset: auto;
    aspect-ratio: 1.45/1;
    -webkit-mask-image: linear-gradient(
      180deg,
      #000 70%,
      rgba(0, 0, 0, 0.96) 73.6%,
      rgba(0, 0, 0, 0.844) 77.5%,
      rgba(0, 0, 0, 0.677) 81.4%,
      rgba(0, 0, 0, 0.5) 85%,
      rgba(0, 0, 0, 0.323) 88.6%,
      rgba(0, 0, 0, 0.156) 92.5%,
      rgba(0, 0, 0, 0.04) 96.4%,
      transparent 100%
    );
    mask-image: linear-gradient(
      180deg,
      #000 70%,
      rgba(0, 0, 0, 0.96) 73.6%,
      rgba(0, 0, 0, 0.844) 77.5%,
      rgba(0, 0, 0, 0.677) 81.4%,
      rgba(0, 0, 0, 0.5) 85%,
      rgba(0, 0, 0, 0.323) 88.6%,
      rgba(0, 0, 0, 0.156) 92.5%,
      rgba(0, 0, 0, 0.04) 96.4%,
      transparent 100%
    );
  }
  .hb-facts {
    flex-wrap: wrap;
    gap: 20px 0;
    margin-top: 34px;
  }
}
@media (min-width: 600px) and (max-width: 900px) {
  .hb-stage {
    aspect-ratio: 1.9/1;
  }
}
@media (max-width: 520px) {
  .hb-facts {
    display: flex;
  }
  .hb-f,
  .hb-f:first-child,
  .hb-f:last-child {
    width: 50%;
    padding: 0;
  }
  .hb-f + .hb-f::before {
    display: none;
  }
}
@media (max-width: 640px) {
  .hb p {
    font-size: 15px;
  }
  .hb-cta {
    gap: 18px;
  }
  .hb-cta .btn {
    width: auto;
  }
}
@media (max-width: 900px), (pointer: coarse), (prefers-reduced-motion: reduce) {
  .hb-cv,
  .hb-in {
    transform: none;
    opacity: 1;
    will-change: auto;
  }
}
@media (prefers-reduced-motion: reduce) {
  .hb-f {
    animation: none;
    opacity: 1;
    transform: none;
  }
}
/* index sections */
.ix {
  position: relative;
}
.ix::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 40px;
  bottom: 0;
  width: min(1500px, 100vw);
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(
      46% 38% at 62% 58%,
      rgba(226, 59, 46, 0.1) 0%,
      rgba(226, 59, 46, 0.096) 8.64%,
      rgba(226, 59, 46, 0.0844) 18%,
      rgba(226, 59, 46, 0.0677) 27.36%,
      rgba(226, 59, 46, 0.05) 36%,
      rgba(226, 59, 46, 0.0323) 44.64%,
      rgba(226, 59, 46, 0.0156) 54%,
      rgba(226, 59, 46, 0.004) 63.36%,
      rgba(226, 59, 46, 0) 72%
    ),
    linear-gradient(rgba(255, 170, 140, 0.05) 1px, transparent 1px) 0 0/64px 64px,
    linear-gradient(90deg, rgba(255, 170, 140, 0.05) 1px, transparent 1px) 0 0/64px 64px;
  -webkit-mask-image: radial-gradient(60% 56% at 55% 58%, #000 20%, transparent 78%);
  mask-image: radial-gradient(60% 56% at 55% 58%, #000 20%, transparent 78%);
}
.ix > .wrap {
  position: relative;
  z-index: 1;
}
section.ix .sec-head {
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  margin-bottom: 36px;
}
@media (max-width: 760px) {
  #highlights.ix .sec-head,
  #layers.ix .sec-head {
    margin-bottom: 32px;
  }
}
.ix .sec-head .kicker {
  margin-bottom: 12px;
}
.ix .sec-head h2 em {
  font-style: normal;
  color: #ee5d2e;
}
.ix .sec-head p {
  margin-top: 24px;
}
@media (max-width: 640px) {
  .ix::before {
    background-size:
      auto,
      44px 44px,
      44px 44px;
  }
}
/* layer preview */
/* recessed, no drop shadow */
#layers .dx-thumb {
  background: radial-gradient(70% 80% at 50% 55%, #141925, #0c0f16 78%);
  box-shadow: none;
}
#layers .dx-thumb:hover {
  box-shadow: none;
}
#layers .dx-thumb::after {
  display: none;
}
#layers .dx-thumb path {
  fill: #283040;
  stroke: #3c4455;
}
/* impact classes */
#layers .dx-thumb path.d1 {
  fill: #7a2418;
}
#layers .dx-thumb path.d2 {
  fill: #a52c1c;
}
#layers .dx-thumb path.d3 {
  fill: #d13a24;
}
#layers .dx-thumb path.d4 {
  fill: #f5502e;
}
/* settle-in: the empty base map comes first (.map), then the first plate
   is swept on (.ready) */
#layers .dx-thumb svg {
  opacity: 0;
  transform: scale(1.035);
  transition: none;
}
#layers .dx-thumb.map svg {
  opacity: 1;
  transform: none;
  transition:
    opacity 0.5s ease,
    transform 1.2s cubic-bezier(0.2, 0.7, 0.2, 1);
}
#layers .dx-thumb.map:hover svg {
  transform: scale(1.05);
}
#layers .dx-thumb path {
  transition: fill 0.5s ease;
}
/* first appearance: a thin line of light sweeps across and paints the plate
   on behind it through a soft-edged mask; later layers morph instead */
#layers .dx-thumb.first.ready image {
  transition: none;
}
#layers .dx-thumb image {
  opacity: 0;
  transition: opacity 0.6s ease;
}
#layers .dx-thumb.ready image.on {
  opacity: 0.9;
  transition: opacity 0.85s cubic-bezier(0.4, 0, 0.2, 1);
}
#layers .dx-thumb.ready:hover image.on {
  opacity: 1;
}
#layers .dx-thumb.first.ready image.on {
  transition: none;
}
/* the light rides the middle of the mask's soft edge: a thin bright core
   with a short glow, plus a narrow band around it that brightens, sharpens
   the colour and slightly distorts what lies beneath, with faint warm and
   cool fringes on either side */
#layers .dx-scan {
  inset: 0;
  z-index: 3;
  opacity: 0;
  transform: translateX(-104.5%);
}
#layers .dx-scan::before,
#layers .dx-scan::after {
  content: '';
  position: absolute;
  top: -10%;
  bottom: -10%;
}
#layers .dx-scan::before {
  right: -22px;
  width: 44px;
  z-index: 1;
  background: linear-gradient(
    90deg,
    rgba(255, 150, 110, 0) 0%,
    rgba(255, 150, 110, 0.05) 30%,
    rgba(255, 190, 156, 0.3) 46%,
    rgba(255, 240, 226, 0.95) 50%,
    rgba(255, 190, 156, 0.26) 54%,
    rgba(255, 150, 110, 0.04) 70%,
    rgba(255, 150, 110, 0) 100%
  );
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 22%, #000 78%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 22%, #000 78%, transparent);
}
#layers .dx-scan::after {
  right: -17px;
  width: 34px;
  -webkit-backdrop-filter: blur(0.8px) brightness(1.2) saturate(1.5) contrast(1.06);
  backdrop-filter: blur(0.8px) brightness(1.2) saturate(1.5) contrast(1.06);
  background: linear-gradient(
    90deg,
    rgba(255, 96, 72, 0) 0%,
    rgba(255, 96, 72, 0.08) 18%,
    rgba(255, 96, 72, 0) 32%,
    rgba(0, 0, 0, 0) 68%,
    rgba(96, 190, 255, 0.07) 82%,
    rgba(96, 190, 255, 0) 100%
  );
  -webkit-mask-image:
    linear-gradient(90deg, transparent, #000 30%, #000 70%, transparent),
    linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(90deg, transparent, #000 30%, #000 70%, transparent),
    linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent);
  mask-composite: intersect;
}
#layers .dx-thumb:not(.first) .dx-scan {
  display: none;
}
#layers .dx-thumb.sweep .dx-scan {
  display: block;
}
/* mask and light are moved together, frame by frame, by dxSweep() */
/* the label pulses while the plate loads */
#layers .dx-thumb:not(.loading):not(.failed) .dx-thumb-wait {
  opacity: 0;
}
#layers .dx-thumb.failed .dx-thumb-wait {
  opacity: 1;
}
#layers .dx-thumb.map.loading:not(.ready) .dx-thumb-wait {
  animation: dxWait 1.4s ease-in-out infinite;
}
@keyframes dxWait {
  0%,
  100% {
    opacity: 0.35;
  }
  50% {
    opacity: 1;
  }
}
#layers .dx-thumb > i {
  position: absolute;
  pointer-events: none;
}

/* inner shadow */
#layers .dx-vig {
  inset: 0;
  z-index: 2;
  border-radius: 12px;
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.3),
    inset 0 0 14px 1px rgba(0, 0, 0, 0.3);
  transition: box-shadow 0.8s cubic-bezier(0.2, 0.7, 0.25, 1);
}
#layers .dx-thumb:hover .dx-vig {
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.3),
    inset 0 0 20px 3px rgba(0, 0, 0, 0.38);
}
/* reflection */
#layers .dx-beam {
  top: -20%;
  bottom: -20%;
  left: 0;
  width: 34%;
  z-index: 3;
  opacity: 0;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.035) 35%,
    rgba(255, 255, 255, 0.075) 50%,
    rgba(255, 255, 255, 0.035) 65%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: translateX(-120%) skewX(-16deg);
}
/* no recurring sheen: the scan is the only light that crosses the preview */
@keyframes dxGlint {
  0% {
    transform: translateX(-120%) skewX(-16deg);
    opacity: 0;
  }
  8% {
    opacity: 1;
  }
  36% {
    opacity: 1;
  }
  44% {
    transform: translateX(420%) skewX(-16deg);
    opacity: 0;
  }
  100% {
    transform: translateX(420%) skewX(-16deg);
    opacity: 0;
  }
}
/* label */
#layers .dx-thumb .dx-thumb-tag {
  z-index: 4;
  color: rgba(232, 226, 226, 0.7);
  transition: color 0.3s ease;
}
#layers .dx-thumb .dx-thumb-tag::after {
  content: 'Open layer \203A';
  margin-left: 12px;
  color: #ffb59c;
  opacity: 0;
  display: inline-block;
  transform: translateX(-4px);
  transition:
    opacity 0.3s ease,
    transform 0.3s ease;
}
#layers .dx-thumb:hover .dx-thumb-tag {
  color: #fff;
}
#layers .dx-thumb:hover .dx-thumb-tag::after {
  opacity: 1;
  transform: none;
}
#layers .dx-thumb .dx-thumb-wait {
  z-index: 4;
}
@media (prefers-reduced-motion: reduce) {
  #layers .dx-thumb svg,
  #layers .dx-thumb.map svg {
    opacity: 1;
    transform: none;
    transition: none;
  }
  #layers .dx-thumb.ready .dx-beam,
  #layers .dx-thumb.ready .dx-scan {
    animation: none;
  }
  #layers .dx-thumb.map.loading:not(.ready) .dx-thumb-wait {
    animation: none;
  }
}

/* Source style section 10 */

/* scrollbar track: the page background lives on html, and turns into the footer colour where the footer starts.
   Top glows scroll with the page (they stay at the top instead of following the viewport). */
html {
  background:
    radial-gradient(
      1200px 600px at 72% -10vh,
      rgba(205, 56, 38, 0.16) 0%,
      rgba(205, 56, 38, 0.1536) 6.96%,
      rgba(205, 56, 38, 0.135) 14.5%,
      rgba(205, 56, 38, 0.1082) 22.04%,
      rgba(205, 56, 38, 0.08) 29%,
      rgba(205, 56, 38, 0.0518) 35.96%,
      rgba(205, 56, 38, 0.025) 43.5%,
      rgba(205, 56, 38, 0.0064) 51.04%,
      rgba(205, 56, 38, 0) 58%
    ),
    radial-gradient(
      1000px 620px at 8% 6vh,
      rgba(44, 74, 160, 0.12) 0%,
      rgba(44, 74, 160, 0.1152) 7.2%,
      rgba(44, 74, 160, 0.1012) 15%,
      rgba(44, 74, 160, 0.0812) 22.8%,
      rgba(44, 74, 160, 0.06) 30%,
      rgba(44, 74, 160, 0.0388) 37.2%,
      rgba(44, 74, 160, 0.0187) 45%,
      rgba(44, 74, 160, 0.0048) 52.8%,
      rgba(44, 74, 160, 0) 60%
    ),
    linear-gradient(180deg, #100707, #0a0505) 0 100%/100% 0 no-repeat scroll,
    var(--bg);
}
body {
  background: transparent;
}

/* Source style section 11 */

/* colour vision: the page glow is painted on html, which the filter on body > *
   cannot reach, so each mode gets the glow already passed through its own matrix */
html[data-cb='protan'] {
  background:
    radial-gradient(
      1200px 600px at 72% -10vh,
      rgba(205, 132, 130, 0.16) 0%,
      rgba(205, 132, 130, 0.1536) 6.96%,
      rgba(205, 132, 130, 0.135) 14.5%,
      rgba(205, 132, 130, 0.1082) 22.04%,
      rgba(205, 132, 130, 0.08) 29%,
      rgba(205, 132, 130, 0.0518) 35.96%,
      rgba(205, 132, 130, 0.025) 43.5%,
      rgba(205, 132, 130, 0.0064) 51.04%,
      rgba(205, 132, 130, 0) 58%
    ),
    radial-gradient(
      1000px 620px at 8% 6vh,
      rgba(44, 59, 141, 0.12) 0%,
      rgba(44, 59, 141, 0.1152) 7.2%,
      rgba(44, 59, 141, 0.1012) 15%,
      rgba(44, 59, 141, 0.0812) 22.8%,
      rgba(44, 59, 141, 0.06) 30%,
      rgba(44, 59, 141, 0.0388) 37.2%,
      rgba(44, 59, 141, 0.0187) 45%,
      rgba(44, 59, 141, 0.0048) 52.8%,
      rgba(44, 59, 141, 0) 60%
    ),
    linear-gradient(180deg, #100c0d, #0a0808) 0 100%/100% 0 no-repeat scroll,
    #0a0b14;
}
html[data-cb='deuter'] {
  background:
    radial-gradient(
      1200px 600px at 72% -10vh,
      rgba(205, 86, 115, 0.16) 0%,
      rgba(205, 86, 115, 0.1536) 6.96%,
      rgba(205, 86, 115, 0.135) 14.5%,
      rgba(205, 86, 115, 0.1082) 22.04%,
      rgba(205, 86, 115, 0.08) 29%,
      rgba(205, 86, 115, 0.0518) 35.96%,
      rgba(205, 86, 115, 0.025) 43.5%,
      rgba(205, 86, 115, 0.0064) 51.04%,
      rgba(205, 86, 115, 0) 58%
    ),
    radial-gradient(
      1000px 620px at 8% 6vh,
      rgba(44, 68, 144, 0.12) 0%,
      rgba(44, 68, 144, 0.1152) 7.2%,
      rgba(44, 68, 144, 0.1012) 15%,
      rgba(44, 68, 144, 0.0812) 22.8%,
      rgba(44, 68, 144, 0.06) 30%,
      rgba(44, 68, 144, 0.0388) 37.2%,
      rgba(44, 68, 144, 0.0187) 45%,
      rgba(44, 68, 144, 0.0048) 52.8%,
      rgba(44, 68, 144, 0) 60%
    ),
    linear-gradient(180deg, #10090c, #0a0608) 0 100%/100% 0 no-repeat scroll,
    #0a0c14;
}
html[data-cb='tritan'] {
  background:
    radial-gradient(
      1200px 600px at 72% -10vh,
      rgba(255, 146, 38, 0.16) 0%,
      rgba(255, 146, 38, 0.1536) 6.96%,
      rgba(255, 146, 38, 0.135) 14.5%,
      rgba(255, 146, 38, 0.1082) 22.04%,
      rgba(255, 146, 38, 0.08) 29%,
      rgba(255, 146, 38, 0.0518) 35.96%,
      rgba(255, 146, 38, 0.025) 43.5%,
      rgba(255, 146, 38, 0.0064) 51.04%,
      rgba(255, 146, 38, 0) 58%
    ),
    radial-gradient(
      1000px 620px at 8% 6vh,
      rgba(26, 56, 160, 0.12) 0%,
      rgba(26, 56, 160, 0.1152) 7.2%,
      rgba(26, 56, 160, 0.1012) 15%,
      rgba(26, 56, 160, 0.0812) 22.8%,
      rgba(26, 56, 160, 0.06) 30%,
      rgba(26, 56, 160, 0.0388) 37.2%,
      rgba(26, 56, 160, 0.0187) 45%,
      rgba(26, 56, 160, 0.0048) 52.8%,
      rgba(26, 56, 160, 0) 60%
    ),
    linear-gradient(180deg, #150c07, #0d0805) 0 100%/100% 0 no-repeat scroll,
    #080b16;
}
html[data-cb='achroma'] {
  background:
    radial-gradient(
      1200px 600px at 72% -10vh,
      rgba(83, 83, 83, 0.16) 0%,
      rgba(83, 83, 83, 0.1536) 6.96%,
      rgba(83, 83, 83, 0.135) 14.5%,
      rgba(83, 83, 83, 0.1082) 22.04%,
      rgba(83, 83, 83, 0.08) 29%,
      rgba(83, 83, 83, 0.0518) 35.96%,
      rgba(83, 83, 83, 0.025) 43.5%,
      rgba(83, 83, 83, 0.0064) 51.04%,
      rgba(83, 83, 83, 0) 58%
    ),
    radial-gradient(
      1000px 620px at 8% 6vh,
      rgba(70, 70, 70, 0.12) 0%,
      rgba(70, 70, 70, 0.1152) 7.2%,
      rgba(70, 70, 70, 0.1012) 15%,
      rgba(70, 70, 70, 0.0812) 22.8%,
      rgba(70, 70, 70, 0.06) 30%,
      rgba(70, 70, 70, 0.0388) 37.2%,
      rgba(70, 70, 70, 0.0187) 45%,
      rgba(70, 70, 70, 0.0048) 52.8%,
      rgba(70, 70, 70, 0) 60%
    ),
    linear-gradient(180deg, #000000, #000000) 0 100%/100% 0 no-repeat scroll,
    #040404;
}
/* with the page content filtered, a translucent panel fill shows the text
   behind it; the panel uses an opaque fill (same colours) and no blur */
html[data-cb]:not([data-cb='off']) .td-a11y-pop::before {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01)),
    linear-gradient(180deg, #1a0f10, #120a0b);
}

/* Source style section 12 */

/* hero map: the map sits in a window that ends exactly at the content edge
   (--cl/--cr measured in JS); the globe turns slowly inside it */
@media (min-width: 901px) {
  .hb-stage {
    -webkit-mask-image:
      linear-gradient(
        90deg,
        rgba(0, 0, 0, 0.06) 0px,
        rgba(0, 0, 0, 0.12) calc(var(--cl, 200px) + 400px),
        #000 calc(var(--cl, 200px) + 650px),
        #000 calc(var(--cr, 1300px) - 110px),
        rgba(0, 0, 0, 0.96) calc(var(--cr, 1300px) - 96.8px),
        rgba(0, 0, 0, 0.844) calc(var(--cr, 1300px) - 82.5px),
        rgba(0, 0, 0, 0.677) calc(var(--cr, 1300px) - 68.2px),
        rgba(0, 0, 0, 0.5) calc(var(--cr, 1300px) - 55px),
        rgba(0, 0, 0, 0.323) calc(var(--cr, 1300px) - 41.8px),
        rgba(0, 0, 0, 0.156) calc(var(--cr, 1300px) - 27.5px),
        rgba(0, 0, 0, 0.04) calc(var(--cr, 1300px) - 13.2px),
        transparent calc(var(--cr, 1300px) + 0px)
      ),
      linear-gradient(
        180deg,
        #000 58%,
        rgba(0, 0, 0, 0.96) 62.56%,
        rgba(0, 0, 0, 0.844) 67.5%,
        rgba(0, 0, 0, 0.677) 72.44%,
        rgba(0, 0, 0, 0.5) 77%,
        rgba(0, 0, 0, 0.323) 81.56%,
        rgba(0, 0, 0, 0.156) 86.5%,
        rgba(0, 0, 0, 0.04) 91.44%,
        transparent 96%
      );
    mask-image:
      linear-gradient(
        90deg,
        rgba(0, 0, 0, 0.06) 0px,
        rgba(0, 0, 0, 0.12) calc(var(--cl, 200px) + 400px),
        #000 calc(var(--cl, 200px) + 650px),
        #000 calc(var(--cr, 1300px) - 110px),
        rgba(0, 0, 0, 0.96) calc(var(--cr, 1300px) - 96.8px),
        rgba(0, 0, 0, 0.844) calc(var(--cr, 1300px) - 82.5px),
        rgba(0, 0, 0, 0.677) calc(var(--cr, 1300px) - 68.2px),
        rgba(0, 0, 0, 0.5) calc(var(--cr, 1300px) - 55px),
        rgba(0, 0, 0, 0.323) calc(var(--cr, 1300px) - 41.8px),
        rgba(0, 0, 0, 0.156) calc(var(--cr, 1300px) - 27.5px),
        rgba(0, 0, 0, 0.04) calc(var(--cr, 1300px) - 13.2px),
        transparent calc(var(--cr, 1300px) + 0px)
      ),
      linear-gradient(
        180deg,
        #000 58%,
        rgba(0, 0, 0, 0.96) 62.56%,
        rgba(0, 0, 0, 0.844) 67.5%,
        rgba(0, 0, 0, 0.677) 72.44%,
        rgba(0, 0, 0, 0.5) 77%,
        rgba(0, 0, 0, 0.323) 81.56%,
        rgba(0, 0, 0, 0.156) 86.5%,
        rgba(0, 0, 0, 0.04) 91.44%,
        transparent 96%
      );
  }
  .hero.hb::after {
    -webkit-mask-image:
      linear-gradient(
        90deg,
        #000 calc(var(--cr, 1300px) - 240px),
        rgba(0, 0, 0, 0.96) calc(var(--cr, 1300px) - 201.6px),
        rgba(0, 0, 0, 0.844) calc(var(--cr, 1300px) - 160px),
        rgba(0, 0, 0, 0.677) calc(var(--cr, 1300px) - 118.4px),
        rgba(0, 0, 0, 0.5) calc(var(--cr, 1300px) - 80px),
        rgba(0, 0, 0, 0.323) calc(var(--cr, 1300px) - 41.6px),
        rgba(0, 0, 0, 0.156) calc(var(--cr, 1300px) + 0px),
        rgba(0, 0, 0, 0.04) calc(var(--cr, 1300px) + 41.6px),
        transparent calc(var(--cr, 1300px) + 80px)
      ),
      linear-gradient(
        180deg,
        #000 62%,
        rgba(0, 0, 0, 0.96) 66.56%,
        rgba(0, 0, 0, 0.844) 71.5%,
        rgba(0, 0, 0, 0.677) 76.44%,
        rgba(0, 0, 0, 0.5) 81%,
        rgba(0, 0, 0, 0.323) 85.56%,
        rgba(0, 0, 0, 0.156) 90.5%,
        rgba(0, 0, 0, 0.04) 95.44%,
        transparent 100%
      );
    -webkit-mask-composite: source-in;
    mask-image:
      linear-gradient(
        90deg,
        #000 calc(var(--cr, 1300px) - 240px),
        rgba(0, 0, 0, 0.96) calc(var(--cr, 1300px) - 201.6px),
        rgba(0, 0, 0, 0.844) calc(var(--cr, 1300px) - 160px),
        rgba(0, 0, 0, 0.677) calc(var(--cr, 1300px) - 118.4px),
        rgba(0, 0, 0, 0.5) calc(var(--cr, 1300px) - 80px),
        rgba(0, 0, 0, 0.323) calc(var(--cr, 1300px) - 41.6px),
        rgba(0, 0, 0, 0.156) calc(var(--cr, 1300px) + 0px),
        rgba(0, 0, 0, 0.04) calc(var(--cr, 1300px) + 41.6px),
        transparent calc(var(--cr, 1300px) + 80px)
      ),
      linear-gradient(
        180deg,
        #000 62%,
        rgba(0, 0, 0, 0.96) 66.56%,
        rgba(0, 0, 0, 0.844) 71.5%,
        rgba(0, 0, 0, 0.677) 76.44%,
        rgba(0, 0, 0, 0.5) 81%,
        rgba(0, 0, 0, 0.323) 85.56%,
        rgba(0, 0, 0, 0.156) 90.5%,
        rgba(0, 0, 0, 0.04) 95.44%,
        transparent 100%
      );
    mask-composite: intersect;
  }
}

/* Source style section 13 */

/* phones: hero and section headings centred */
@media (max-width: 760px) {
  .hb-copy {
    text-align: center;
    margin-inline: auto;
  }
  .hb h1,
  .hb p {
    margin-inline: auto;
  }
  .hb-cta {
    justify-content: center;
  }
  .hb-facts {
    justify-content: center;
  }
  .hb-f {
    align-items: center;
    text-align: center;
  }
  section.ix .sec-head {
    align-items: center;
    text-align: center;
  }
  section.ix .sec-head p {
    margin-inline: auto;
  }
  section.ix .sec-head h2::after {
    left: 50%;
    margin-left: -36px;
    transform-origin: center;
  }
}