@font-face {
  font-family: "Inter";
  src: url("/assets/fonts/inter.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Source Serif 4";
  src: url("/assets/fonts/source-serif-4.woff2") format("woff2");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Source Serif 4";
  src: url("/assets/fonts/source-serif-4-italic.woff2") format("woff2");
  font-weight: 200 900;
  font-style: italic;
  font-display: swap;
}

:root {
  --ink: #0b1322;
  --ink-2: #111b2e;
  --paper: #f6f4ef;
  --surface: #ffffff;
  --text: #131925;
  --muted: #586174;
  --line: rgba(19, 25, 37, 0.12);
  --gold: #d6a650;
  --gold-ink: #8a5d12;
  --on-dark: #f2efe7;
  --on-dark-muted: #a9b2c3;
  --on-dark-line: rgba(242, 239, 231, 0.14);
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --serif: "Source Serif 4", "Iowan Old Style", Georgia, serif;
  --flag-red: #ff0000;
  --wrap: 1160px;
  --gutter: clamp(20px, 5vw, 40px);
  --radius: 14px;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font: 400 17px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: var(--gold-ink);
  text-underline-offset: 3px;
}

h1,
h2,
h3 {
  margin: 0;
  text-wrap: balance;
}

p {
  margin: 0;
  text-wrap: pretty;
}

.wrap {
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.skip {
  position: absolute;
  left: -999px;
  top: 8px;
  z-index: 10;
  padding: 8px 14px;
  border-radius: 8px;
  background: var(--gold);
  color: var(--ink);
}
.skip:focus {
  left: 8px;
}

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

/* Bands */

.band {
  padding-block: clamp(72px, 10vw, 124px);
}
.band--dark {
  background: var(--ink);
  color: var(--on-dark);
}
.band--deep {
  background: var(--ink-2);
  color: var(--on-dark);
}
.band--surface {
  background: var(--surface);
}
.band--dark a:not(.btn),
.band--deep a:not(.btn) {
  color: var(--gold);
}

/* Header */

.site-header {
  background: var(--ink);
  color: var(--on-dark);
  border-bottom: 1px solid var(--on-dark-line);
}
.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 76px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--on-dark);
  text-decoration: none;
}
.brand svg {
  width: 30px;
  height: 30px;
  flex: none;
}
.brand-name {
  display: flex;
  flex-direction: column;
  line-height: 1;
}
.brand-name b {
  font: 700 21px/1 var(--serif);
  letter-spacing: 0.04em;
}
.brand-name small {
  margin-top: 4px;
  color: var(--on-dark-muted);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.nav {
  display: flex;
  align-items: center;
  gap: clamp(16px, 3vw, 34px);
  font-size: 15px;
}
.nav a:not(.btn) {
  color: var(--on-dark-muted);
  text-decoration: none;
}
.nav a:not(.btn):hover,
.nav a[aria-current="page"] {
  color: var(--on-dark);
}

/* Buttons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 46px;
  padding: 0 22px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--gold);
  color: var(--ink);
  font: 600 15px/1 var(--sans);
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.btn:hover {
  background: #e3b768;
}
.btn--small {
  min-height: 38px;
  padding: 0 16px;
  font-size: 14px;
}
.btn--ghost {
  background: transparent;
  border-color: var(--on-dark-line);
  color: var(--on-dark);
}
.btn--ghost:hover {
  background: transparent;
  border-color: var(--gold);
  color: var(--gold);
}
.btn--ink {
  background: var(--ink);
  color: var(--on-dark);
}
.btn--ink:hover {
  background: var(--ink-2);
}

/* Type */

.eyebrow {
  margin-bottom: 18px;
  color: var(--gold-ink);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.band--dark .eyebrow,
.band--deep .eyebrow {
  color: var(--gold);
}
.display {
  font: 500 clamp(2.6rem, 5.8vw, 4.75rem)/1.04 var(--serif);
  letter-spacing: -0.015em;
}
.display em {
  color: var(--gold);
  font-style: italic;
}
.h2 {
  font: 500 clamp(2rem, 3.8vw, 3.1rem)/1.1 var(--serif);
  letter-spacing: -0.01em;
}
.h2--sm {
  font-size: clamp(1.6rem, 2.6vw, 2.1rem);
}
.h3 {
  font: 600 1.15rem/1.35 var(--sans);
}
.lede {
  max-width: 62ch;
  margin-top: 26px;
  color: var(--muted);
  font-size: clamp(1.08rem, 1.5vw, 1.25rem);
  line-height: 1.6;
}
.band--dark .lede,
.band--deep .lede {
  color: var(--on-dark-muted);
}
.muted {
  color: var(--muted);
}
.band--dark .muted,
.band--deep .muted {
  color: var(--on-dark-muted);
}
.section-head {
  max-width: 760px;
  margin-bottom: clamp(40px, 6vw, 64px);
}

/* Hero */

.hero {
  padding-block: clamp(72px, 11vw, 136px) clamp(56px, 8vw, 96px);
}
.hero .actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 40px;
}
.hero--short {
  padding-block: clamp(64px, 9vw, 112px) clamp(56px, 7vw, 88px);
}

.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: clamp(56px, 8vw, 96px);
  border-top: 1px solid var(--on-dark-line);
}
.stat {
  padding: 28px 24px 0 0;
}
.stat + .stat {
  padding-left: 24px;
  border-left: 1px solid var(--on-dark-line);
}
.stat b {
  display: block;
  font: 500 clamp(1.7rem, 3vw, 2.4rem)/1.1 var(--serif);
}
.stat span {
  display: block;
  margin-top: 8px;
  color: var(--on-dark-muted);
  font-size: 14px;
}

.trusted {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 12px 34px;
  margin-top: 48px;
  color: var(--on-dark-muted);
}
.trusted p {
  font-size: 14px;
}
.trusted ul {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 30px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.trusted li {
  color: var(--on-dark);
  font: 600 15px/1 var(--sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.78;
}

/* Grids */

.pillars {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0 clamp(32px, 6vw, 80px);
}
.pillar {
  padding: 30px 0 38px;
  border-top: 1px solid var(--line);
}
.pillar .num {
  display: block;
  margin-bottom: 14px;
  color: var(--gold-ink);
  font: 500 15px/1 var(--serif);
  letter-spacing: 0.06em;
}
.pillar p {
  margin-top: 10px;
  color: var(--muted);
}
.footnote {
  margin-top: 18px;
  padding-top: 26px;
  border-top: 1px solid var(--line);
  color: var(--muted);
}
.footnote b {
  color: var(--text);
  font-weight: 600;
}

.split {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(40px, 7vw, 96px);
  align-items: start;
}

.ledger {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}
.ledger li {
  display: flex;
  gap: 18px;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
}
.ledger li::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  margin-top: 10px;
  border-radius: 2px;
  background: var(--gold);
}
.sectors {
  margin-top: 30px;
  color: var(--muted);
  font-size: 15px;
}
.sectors b {
  display: block;
  margin-bottom: 6px;
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.duo {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
.panel {
  padding: clamp(28px, 4vw, 44px);
  border: 1px solid var(--on-dark-line);
  border-radius: var(--radius);
  background: rgba(242, 239, 231, 0.03);
}
.panel .h3 {
  font: 500 1.6rem/1.2 var(--serif);
}
.panel p {
  margin-top: 16px;
  color: var(--on-dark-muted);
}
.panel p + p {
  margin-top: 12px;
}

.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}
.steps li {
  position: relative;
  padding-top: 62px;
  counter-increment: step;
}
.steps li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--gold-ink);
  border-radius: 50%;
  background: var(--paper);
  color: var(--gold-ink);
  font: 500 15px/1 var(--serif);
}
.steps li::after {
  content: "";
  position: absolute;
  top: 21px;
  left: 54px;
  right: -16px;
  height: 1px;
  background: var(--line);
}
.steps li:last-child::after {
  display: none;
}
.steps p {
  margin-top: 10px;
  color: var(--muted);
}

.offer {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(40px, 7vw, 96px);
}
.checks {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0 32px;
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
}
.checks li {
  display: flex;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  font-size: 15.5px;
}
.checks li::before {
  content: "";
  flex: none;
  width: 14px;
  height: 8px;
  margin-top: 6px;
  border-left: 2px solid var(--gold-ink);
  border-bottom: 2px solid var(--gold-ink);
  transform: rotate(-45deg);
}
.terms {
  padding: clamp(28px, 4vw, 44px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
}
.terms p {
  margin-top: 16px;
  color: var(--muted);
}
.terms .btn {
  margin-top: 28px;
}

/* Photos */

.photo-band {
  margin: 0;
  background: var(--ink);
}
.photo-band img {
  width: 100%;
  height: clamp(280px, 42vw, 620px);
  object-fit: cover;
}
.photo {
  width: 100%;
  aspect-ratio: 21 / 9;
  margin-bottom: 24px;
  object-fit: cover;
  border-radius: var(--radius);
}
.gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: clamp(48px, 7vw, 80px);
}
.gallery figure {
  margin: 0;
}
.gallery img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius);
}
.gallery figcaption {
  margin-top: 12px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Platform cards */

.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.card {
  display: flex;
  flex-direction: column;
  padding: 34px 32px 30px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  text-decoration: none;
  transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.card:hover {
  border-color: var(--gold);
  box-shadow: 0 18px 40px -28px rgba(11, 19, 34, 0.45);
  transform: translateY(-2px);
}
.card .tag {
  align-self: flex-start;
  margin-bottom: 6px;
  padding: 5px 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
/* Each platform's logo sits on a dark panel across the card's top: the
   logos are drawn for dark grounds. */
.card .card-logo {
  display: flex;
  align-items: center;
  height: 124px;
  margin: -34px -32px 28px;
  padding: 0 32px;
  border-radius: calc(var(--radius) - 1px) calc(var(--radius) - 1px) 0 0;
  background: var(--ink);
}
.card-logo img {
  width: auto;
  max-width: 100%;
  height: 40px;
}
.card-logo img[src$="telemetrytv.svg"] {
  height: 50px;
}
.card-logo img[src$="telemetryos.svg"] {
  height: 46px;
}
.card-logo img[src$="screenrig.webp"] {
  height: 34px;
}
.card blockquote {
  margin: 16px 0 0;
  font: italic 400 1.12rem/1.4 var(--serif);
}
.card p {
  margin-top: 14px;
  color: var(--muted);
}
.card .go {
  margin-top: auto;
  padding-top: 26px;
  color: var(--gold-ink);
  font-size: 15px;
  font-weight: 600;
}
.card .go::after {
  content: " \2192";
}

/* CTA */

.cta {
  text-align: center;
}
.cta .h2 {
  max-width: 18ch;
  margin-inline: auto;
}
.cta .lede {
  margin-inline: auto;
}
.cta .btn {
  margin-top: 36px;
}

/* About */

.timeline {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}
.timeline li {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 24px;
  padding: 26px 0;
  border-bottom: 1px solid var(--line);
}
.timeline time {
  color: var(--gold-ink);
  font: 500 1.5rem/1.2 var(--serif);
}
.timeline p {
  margin-top: 6px;
  color: var(--muted);
}

.team {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px 28px;
}
.person img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center 22%;
  border-radius: var(--radius);
  background: var(--line);
}
.person h3 {
  margin-top: 18px;
  font: 500 1.35rem/1.2 var(--serif);
}
.person .role {
  margin-top: 4px;
  color: var(--gold-ink);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.person p:not(.role) {
  margin-top: 12px;
  color: var(--muted);
  font-size: 15.5px;
}

/* Contact */

.contact {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: start;
}
.form {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  padding: clamp(28px, 4vw, 44px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}
.field {
  display: grid;
  gap: 8px;
}
.field--wide {
  grid-column: 1 / -1;
}
.field label {
  font-size: 14px;
  font-weight: 600;
}
.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 46px;
  padding: 11px 14px;
  border: 1px solid rgba(19, 25, 37, 0.2);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 16px;
}
.field textarea {
  min-height: 150px;
  resize: vertical;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--gold-ink);
  outline: 2px solid rgba(214, 166, 80, 0.35);
  outline-offset: 0;
}
.form-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 24px;
  grid-column: 1 / -1;
  margin-top: 6px;
}
.form-foot p {
  flex: 1 1 260px;
  color: var(--muted);
  font-size: 14px;
}
.status {
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: 15px;
}
.status:empty {
  display: none;
}
.next {
  margin: 30px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: next;
}
.next li {
  position: relative;
  padding: 0 0 26px 52px;
  counter-increment: next;
}
.next li::before {
  content: counter(next);
  position: absolute;
  left: 0;
  top: -2px;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--gold-ink);
  border-radius: 50%;
  color: var(--gold-ink);
  font: 500 15px/1 var(--serif);
}
.next p {
  margin-top: 4px;
  color: var(--muted);
}
.address {
  margin-top: 10px;
  padding-top: 26px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 15px;
  font-style: normal;
}

/* Footer */

.site-footer {
  padding-block: 56px 44px;
  background: var(--ink);
  color: var(--on-dark-muted);
  font-size: 14px;
}
.site-footer a {
  color: var(--on-dark-muted);
  text-decoration: none;
}
.site-footer a:hover,
.site-footer .brand {
  color: var(--on-dark);
}
.footer-top {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 32px;
  padding-bottom: 36px;
  border-bottom: 1px solid var(--on-dark-line);
}
.footer-top p {
  margin-top: 18px;
}
.footer-cols {
  display: flex;
  flex-wrap: wrap;
  gap: 48px;
}
.footer-cols b {
  display: block;
  margin-bottom: 12px;
  color: var(--on-dark);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.footer-cols ul {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.footer-base {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 24px;
  padding-top: 26px;
}
.language {
  min-height: 34px;
  padding: 0 30px 0 12px;
  border: 1px solid var(--on-dark-line);
  border-radius: 8px;
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23a9b2c3' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 11px center / 10px 6px;
  color: var(--on-dark-muted);
  font: inherit;
  appearance: none;
  cursor: pointer;
}
.language option {
  background: var(--ink);
  color: var(--on-dark);
}

/* Made in Canada: site.js adds the ribbon for readers outside the United
   States, on the footer's bottom-right corner, in the flag's red with a
   slanted left edge. On a phone it takes its own row under the footer. */
.site-footer {
  position: relative;
}
.has-made-in-canada .footer-base {
  padding-right: 260px;
}
.made-in-canada {
  position: absolute;
  right: 0;
  bottom: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 48px;
  margin: 0;
  padding: 0 28px 0 56px;
  background: var(--flag-red);
  clip-path: polygon(48px 0, 100% 0, 100% 100%, 0 100%);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1;
  text-transform: uppercase;
}
.made-in-canada svg {
  flex: none;
  width: 16px;
  height: 16px;
}

/* Japanese and Chinese: the Latin web fonts fall back to the system's CJK
   faces, and headings need room for taller glyphs. */
:lang(ja) {
  --sans: "Inter", "Hiragino Sans", "Yu Gothic UI", "Noto Sans JP", "Noto Sans CJK JP", sans-serif;
  --serif: "Source Serif 4", "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", "Noto Serif CJK JP", serif;
}
:lang(zh-Hans) {
  --sans: "Inter", "PingFang SC", "Microsoft YaHei", "Noto Sans SC", "Noto Sans CJK SC", sans-serif;
  --serif: "Source Serif 4", "Songti SC", "SimSun", "Noto Serif SC", "Noto Serif CJK SC", serif;
}
:lang(ja) h1,
:lang(ja) h2,
:lang(ja) h3 {
  word-break: auto-phrase;
}
:lang(ja) .display,
:lang(zh-Hans) .display,
:lang(ja) .h2,
:lang(zh-Hans) .h2 {
  line-height: 1.3;
  letter-spacing: 0;
}

/* Motion: a short entrance for each page's hero, reveals as sections scroll
   in (motion.js), one slow drift on the wide photo and small hover cues.
   Nothing moves for readers who prefer reduced motion. */

.card .go::after {
  display: inline-block;
  transition: transform 0.2s ease;
}
.card:hover .go::after {
  transform: translateX(4px);
}

@media (prefers-reduced-motion: no-preference) {
  @keyframes rise {
    from {
      opacity: 0;
      transform: translateY(16px);
    }
  }
  @keyframes fade {
    from {
      opacity: 0;
    }
  }
  @keyframes drift {
    to {
      transform: scale(1.07);
    }
  }

  .hero .eyebrow,
  .hero .display,
  .hero .lede,
  .hero .actions,
  .hero .stats,
  .hero .trusted {
    animation: rise 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) both;
  }
  .hero .display {
    animation-delay: 0.08s;
  }
  .hero .display em {
    animation: fade 1.2s ease 0.5s both;
  }
  .hero .lede {
    animation-delay: 0.18s;
  }
  .hero .actions {
    animation-delay: 0.28s;
  }
  .hero .stats {
    animation-delay: 0.4s;
  }
  .hero .trusted {
    animation-delay: 0.5s;
  }

  /* The logo's four screens switch on in turn. */
  .site-header .brand rect {
    animation: fade 0.45s ease both;
  }
  .site-header .brand rect:nth-child(2) {
    animation-delay: 0.12s;
  }
  .site-header .brand rect:nth-child(3) {
    animation-delay: 0.24s;
  }
  .site-header .brand rect:nth-child(4) {
    animation-delay: 0.36s;
  }

  .photo-band {
    overflow: hidden;
  }
  .photo-band img {
    transform-origin: 60% 45%;
    animation: drift 30s ease-in-out infinite alternate;
  }

  .reveal {
    opacity: 0;
    transform: translateY(18px);
    transition:
      opacity 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) var(--reveal-delay, 0s),
      transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) var(--reveal-delay, 0s);
  }
  .reveal.is-visible {
    opacity: 1;
    transform: none;
  }
  /* The line between engagement steps draws across after its step arrives. */
  .steps li.reveal::after {
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) calc(var(--reveal-delay, 0s) + 0.3s);
  }
  .steps li.reveal.is-visible::after {
    transform: scaleX(1);
  }
}

/* Responsive */

@media (max-width: 960px) {
  .cards,
  .team,
  .gallery {
    grid-template-columns: repeat(2, 1fr);
  }
  .cards .card:last-child {
    grid-column: 1 / -1;
  }
  .steps {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 40px;
  }
  .steps li:nth-child(2)::after {
    display: none;
  }
  .split,
  .offer,
  .contact {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  body {
    font-size: 16px;
  }
  .nav a:not(.btn) {
    display: none;
  }
  .stats {
    grid-template-columns: repeat(2, 1fr);
  }
  .stat:nth-child(3) {
    padding-left: 0;
    border-left: 0;
  }
  .pillars,
  .duo,
  .cards,
  .team,
  .checks,
  .form {
    grid-template-columns: 1fr;
  }
  .steps {
    grid-template-columns: 1fr;
  }
  .steps li::after {
    display: none;
  }
  .timeline li {
    grid-template-columns: 1fr;
    gap: 4px;
  }
  .has-made-in-canada .footer-base {
    padding-right: 0;
    padding-bottom: 64px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .card,
  .btn {
    transition: none;
  }
  .card:hover {
    transform: none;
  }
}