:root {
  --paper: #f4f5f5;
  --white: #ffffff;
  --navy: #06122b;
  --muted: rgba(6, 18, 43, .58);
  --line: rgba(6, 18, 43, .16);
  --indigo: #4336d7;
  --sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --serif: Georgia, "Times New Roman", serif;
  --ease: cubic-bezier(.22, 1, .36, 1);
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  background: var(--paper);
}

body {
  margin: 0;
  min-width: 20rem;
  background: var(--paper);
  color: var(--navy);
  font-family: var(--sans);
}

img { display: block; max-width: 100%; }
a { color: inherit; }
.ts-site { overflow: hidden; }

.ts-nav {
  position: absolute;
  z-index: 10;
  top: 0;
  left: 0;
  display: flex;
  justify-content: space-between;
  gap: 2rem;
  width: 100%;
  padding: 1.35rem clamp(1.35rem, 4vw, 4.5rem);
  border-bottom: 1px solid var(--line);
}

.ts-back,
.ts-status {
  color: rgba(6, 18, 43, .56);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.ts-back {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  text-decoration: none;
  transition: color .35s ease;
}

.ts-back:hover,
.ts-back:focus-visible { color: var(--navy); }
.ts-status { color: var(--indigo); }

.ts-hero {
  position: relative;
  display: grid;
  align-items: center;
  min-height: 100svh;
  padding: clamp(7.5rem, 13vh, 11rem) clamp(1.5rem, 7vw, 8rem) 5.5rem;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at 82% 42%, rgba(67, 54, 215, .08), transparent 30%),
    linear-gradient(120deg, #fff 0%, #f5f6f6 64%, #eef0f2 100%);
}

.ts-hero::before {
  content: "";
  position: absolute;
  z-index: -2;
  inset: 0;
  opacity: .3;
  background-image: repeating-linear-gradient(
    90deg,
    rgba(6, 18, 43, .025) 0,
    rgba(6, 18, 43, .025) 1px,
    transparent 1px,
    transparent 8.333vw
  );
}

.ts-layers {
  position: absolute;
  z-index: -1;
  right: -8%;
  top: 3%;
  width: min(58vw, 56rem);
  height: 94%;
  object-fit: contain;
  opacity: .22;
  filter: grayscale(1) contrast(.82);
}

.ts-hero-copy {
  position: relative;
  z-index: 2;
  width: min(62rem, 70%);
}

.ts-wordmark {
  width: min(36rem, 68vw);
  margin: 0 0 clamp(3rem, 8vh, 6rem);
}

.ts-kicker {
  margin: 0 0 1.35rem;
  color: var(--indigo);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.ts-hero h1 {
  max-width: 12ch;
  margin: 0;
  font-size: clamp(3.5rem, 6.4vw, 7.8rem);
  font-weight: 300;
  line-height: .94;
  letter-spacing: -.067em;
}

.ts-lede {
  max-width: 36rem;
  margin: 2rem 0 0;
  color: var(--muted);
  font-size: clamp(1rem, 1.25vw, 1.2rem);
  font-weight: 300;
  line-height: 1.58;
}

.ts-journey {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  width: min(100%, 19rem);
  margin-top: 2.5rem;
  padding: 1rem 0;
  border-top: 1px solid rgba(6, 18, 43, .28);
  border-bottom: 1px solid rgba(6, 18, 43, .28);
  color: rgba(6, 18, 43, .68);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-decoration: none;
  text-transform: uppercase;
  transition: color .35s ease, border-color .35s ease;
}

.ts-journey:hover,
.ts-journey:focus-visible {
  color: var(--indigo);
  border-color: var(--indigo);
}

.ts-hero-foot {
  position: absolute;
  right: clamp(1.5rem, 7vw, 8rem);
  bottom: 1.4rem;
  left: clamp(1.5rem, 7vw, 8rem);
  display: flex;
  justify-content: space-between;
  gap: 2rem;
  padding-top: .85rem;
  border-top: 1px solid var(--line);
  color: rgba(6, 18, 43, .38);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.ts-applications {
  padding: clamp(6rem, 12vh, 10rem) clamp(1.5rem, 5.5vw, 6rem);
  background: var(--white);
}

.ts-applications-head {
  display: grid;
  grid-template-columns: 1.35fr .65fr;
  gap: clamp(3rem, 10vw, 10rem);
  align-items: end;
  margin-bottom: clamp(4rem, 9vh, 7rem);
}

.ts-applications h2 {
  max-width: 10ch;
  margin: 0;
  font-size: clamp(3.3rem, 6vw, 7rem);
  font-weight: 300;
  line-height: .94;
  letter-spacing: -.065em;
}

.ts-applications-head > p {
  max-width: 25rem;
  margin: 0 0 .5rem;
  color: var(--muted);
  font-family: var(--serif);
  font-size: clamp(1.15rem, 1.8vw, 1.55rem);
  font-style: italic;
  line-height: 1.45;
}

.ts-module-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}

.ts-module {
  --accent: var(--indigo);
  position: relative;
  min-height: 27rem;
  padding: clamp(1.5rem, 3vw, 3rem);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
  transition: background .55s ease;
}

.ts-module::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .6s var(--ease);
}

.ts-module:hover { background: #fafafa; }
.ts-module:hover::before { transform: scaleX(1); }
.ts-module.comps { --accent: #087cf1; }
.ts-module.design { --accent: #12aeb6; }
.ts-module.proforma { --accent: #62b33b; }
.ts-module.capital { --accent: #ef8a00; }
.ts-module.performance { --accent: #c71d73; }

.ts-module-number {
  display: block;
  color: rgba(6, 18, 43, .36);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .16em;
}

.ts-module img {
  width: clamp(7.5rem, 10vw, 10rem);
  height: 10rem;
  margin: clamp(2.4rem, 5vh, 4rem) 0 2.5rem;
  object-fit: contain;
  object-position: left center;
  transition: transform .65s var(--ease);
}

.ts-module:hover img { transform: translateY(-.35rem); }

.ts-module h3 {
  max-width: 12ch;
  margin: 0;
  font-size: clamp(1.5rem, 2.2vw, 2.3rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -.045em;
}

.ts-module p {
  max-width: 20rem;
  margin: 1.15rem 0 0;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.48;
}

.ts-coming {
  position: relative;
  min-height: 72svh;
  padding: clamp(6rem, 14vh, 11rem) clamp(1.5rem, 7vw, 8rem);
  overflow: hidden;
  background:
    radial-gradient(circle at 85% 30%, rgba(67, 54, 215, .32), transparent 28%),
    var(--navy);
  color: #fff;
}

.ts-coming::after {
  content: "T";
  position: absolute;
  right: -3vw;
  bottom: -20vw;
  color: rgba(255, 255, 255, .025);
  font-size: min(70vw, 62rem);
  font-weight: 600;
  line-height: 1;
}

.ts-coming .ts-kicker { color: #948cff; }

.ts-coming h2 {
  position: relative;
  z-index: 1;
  margin: 0;
  font-size: clamp(5rem, 13vw, 14rem);
  font-weight: 300;
  line-height: .86;
  letter-spacing: -.08em;
}

.ts-coming > p:not(.ts-kicker) {
  position: relative;
  z-index: 1;
  max-width: 33rem;
  margin: 2.5rem 0 0;
  color: rgba(255, 255, 255, .55);
  font-family: var(--serif);
  font-size: clamp(1.15rem, 1.7vw, 1.5rem);
  font-style: italic;
  line-height: 1.45;
}

.ts-coming a {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  gap: 2rem;
  width: min(100%, 20rem);
  margin-top: 3.5rem;
  padding: 1rem 0;
  border-top: 1px solid rgba(255, 255, 255, .25);
  border-bottom: 1px solid rgba(255, 255, 255, .25);
  color: rgba(255, 255, 255, .7);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-decoration: none;
  text-transform: uppercase;
}

.ts-footer {
  display: flex;
  justify-content: space-between;
  gap: 2rem;
  padding: 1.35rem clamp(1.5rem, 4vw, 4.5rem);
  border-top: 1px solid rgba(255, 255, 255, .12);
  background: var(--navy);
  color: rgba(255, 255, 255, .34);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
}

@media (max-width: 960px) {
  .ts-hero-copy { width: 78%; }
  .ts-layers { right: -23%; width: 75vw; }
  .ts-applications-head { grid-template-columns: 1fr; }
  .ts-module-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .ts-nav { padding: 1.2rem 1.35rem; }
  .ts-status { max-width: 9rem; text-align: right; }
  .ts-hero { padding: 8rem 1.35rem 5.5rem; }
  .ts-hero-copy { width: 100%; }
  .ts-wordmark { width: 92%; margin-bottom: 4rem; }
  .ts-hero h1 { font-size: clamp(3.25rem, 15vw, 5rem); }
  .ts-layers { right: -54%; top: 18%; width: 130vw; opacity: .13; }
  .ts-hero-foot span:first-child { max-width: 18rem; }
  .ts-hero-foot span:last-child { display: none; }
  .ts-applications { padding: 6rem 1.35rem; }
  .ts-module-grid { grid-template-columns: 1fr; }
  .ts-module { min-height: 24rem; }
  .ts-module img { width: 9rem; }
  .ts-coming { padding: 7rem 1.35rem; }
  .ts-footer { flex-direction: column; gap: .7rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; }
}