/* ===== Fonts: everything in Arfilit ===== */
@font-face { font-family: "Arfilit"; src: url("fonts/Arfilit-ExtraLight.woff2") format("woff2"); font-weight: 200; font-display: swap; }
@font-face { font-family: "Arfilit"; src: url("fonts/Arfilit-Light.woff2") format("woff2"); font-weight: 300; font-display: swap; }
@font-face { font-family: "Arfilit"; src: url("fonts/Arfilit-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Arfilit"; src: url("fonts/Arfilit-SemiBold.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Arfilit"; src: url("fonts/Arfilit-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Arfilit"; src: url("fonts/Arfilit-Black.woff2") format("woff2"); font-weight: 900; font-display: swap; }

/* ===== Tokens ===== */
:root {
  --yellow: #fbbd2c;
  --yellow-deep: #ebb22b;
  --navy: #121325;
  --ink: #191919;
  --white: #fff;
  --orange-l: #ffc101;
  --orange-r: #ffae01;
  --f-ui: "Arfilit", system-ui, sans-serif;
  --f-nav: "Arfilit", system-ui, sans-serif;
  --f-hero: "Arfilit", system-ui, sans-serif;
  --f-body: "Arfilit", system-ui, sans-serif;
  --f-display: "Arfilit", system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: linear-gradient(90deg, var(--orange-l), var(--orange-r));
  color: var(--white);
  font-family: var(--f-ui);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
  font-feature-settings: "calt" 0;   /* Arfilit would join runs of digits into capsules */
}
a { color: inherit; text-decoration: none; }
img, svg { display: block; }
p, h1 { margin: 0; font-weight: inherit; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* The design is drawn on a 1920px canvas; scale.js zooms it to the viewport width */
.site {
  position: relative;
  width: 1920px;
  padding-bottom: 50px;
  overflow: clip;              /* clip, not hidden: keeps position: sticky working */
  background: linear-gradient(90deg, var(--orange-l), var(--orange-r));
}

/* Dark rounded frame that sits inside the orange border (Figma: Rectangle 10) */
.frame {
  position: absolute;
  left: 33px; top: 30px;
  width: 1854px; bottom: 50px;
  border-radius: 60px;
  background: var(--navy);
}

/* ===== Top (header + hero) ===== */
.top { position: relative; height: 1059px; }   /* Figma: 1059, room under the buttons for the laptop */

/* ===== Hero background, layer for layer from Figma =====
   Rectangle 318-334: 33 x 1027, #FBB000 @ 20%, blend Color dodge, layer blur 55, every 80px
   Ellipse 72: 966 x 890, linear #FFE6C9 -> #FBBD2C @ 30%, blend Color dodge, layer blur 550 */
.hero-stripes {
  position: absolute;
  left: 33px; top: 30px;
  width: 1854px; height: 1029px;
  border-radius: 60px 60px 0 0;
  overflow: hidden;
  isolation: isolate;
  background: var(--navy);
  pointer-events: none;
}
.hero-stripes i {
  position: absolute;
  left: var(--x); top: -94px;
  width: 33px; height: 1027px;
  background: rgba(251, 176, 0, var(--a, .2));
  opacity: var(--o, 1);
  mix-blend-mode: color-dodge;
  filter: blur(16px);              /* matched by eye against Figma (layer blur 55) */
}
.hero-stripes .hero-stripes__glow {
  left: -71px; top: -61px;
  width: 966px; height: 890px;
  border-radius: 50%;
  background: linear-gradient(to bottom, #ffe6c9, #fbbd2c);
  opacity: .3;
  filter: blur(275px);
  transform: translate3d(var(--gx, 0), var(--gy, 0), 0);
}

/* ===== Header ===== */
.header { position: absolute; inset: 0 0 auto 0; height: 120px; z-index: 5; }
.logo { position: absolute; left: 68px; top: 66px; }
.nav__item {
  position: absolute;
  right: var(--r);
  top: 64px;
  font-family: var(--f-nav);
  font-size: 20px;
  font-weight: 400;
  line-height: 24px;
  white-space: nowrap;
  transition: color .2s;
}
.nav__item:hover { color: var(--yellow); }
.nav__item--what { isolation: isolate; }
.nav__dot {
  position: absolute;
  left: -15px; top: -3px;
  width: 38px; height: 35px;
  border-radius: 50%;
  background: var(--yellow);
  z-index: -1;
}

/* ===== Hero ===== */
.hero { position: absolute; inset: 0 0 auto 0; height: 923px; }
.hero__title { position: absolute; left: 464px; top: 296px; width: 992px; height: 204px; margin: 0; }
.hero__title img { width: 992px; height: 204px; }

.hero__sub { font-family: var(--f-hero); font-size: 40px; font-weight: 400; line-height: 48px; }
.hero__sub-a, .hero__sub-b { position: absolute; top: 540px; white-space: nowrap; }
.hero__sub-a { right: 511px; color: var(--white); }
.hero__sub-b { left: 484px; color: var(--yellow); }
.hero__toggle { position: absolute; left: 951px; top: 540px; }

.btn {
  position: relative; isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 999px;
  color: #F3EFE7;
  font-family: var(--f-hero);
  font-size: 21px;
  font-weight: 400;
  background: linear-gradient(180deg, #1b1c2c, #0a0b14);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 14px 34px rgba(0, 0, 0, .45);
  transition: border-color .3s, color .3s;
}
.btn:hover { border-color: rgba(251, 189, 44, .35); color: #fff; }

/* the glow: a bright line on the top edge and a soft light spilling from it, drifting gently */
.btn::before, .btn::after { content: ""; position: absolute; pointer-events: none; animation: btn-glow 6s ease-in-out infinite; }
.btn::before {
  left: 20%; right: 20%; top: -1px; height: 1.5px; border-radius: 2px;
  background: linear-gradient(90deg, rgba(251, 189, 44, 0), #FBBD2C 30%, #fff4cf 50%, #F07A2C 72%, rgba(240, 122, 44, 0));
}
.btn::after {
  left: 16%; right: 16%; top: -16px; height: 34px; border-radius: 50%; z-index: -1;
  background: radial-gradient(closest-side, rgba(255, 214, 120, .85), rgba(251, 189, 44, .45) 45%, rgba(240, 122, 44, .18) 70%, rgba(240, 122, 44, 0));
  filter: blur(9px); opacity: .85; transition: opacity .35s, left .45s, right .45s;
}
.btn:hover::after { opacity: 1; left: 8%; right: 8%; }
@keyframes btn-glow { 0%, 100% { translate: -12% 0; } 50% { translate: 12% 0; } }
@media (prefers-reduced-motion: reduce) { .btn::before, .btn::after { animation: none; } }
/* Figma: Frame 11 - 340 x 72 at (790, 660), radius 38; arrow 59 x 59 at +68,+9; text at +146,+26 */
.hero__cta { position: absolute; left: 790px; top: 660px; width: 340px; height: 72px; border-radius: 38px; display: block; }
.hero__cta-arrow { position: absolute; left: 68px; top: 9px; }
.hero__cta-text { position: absolute; left: 146px; top: 26px; width: 126px; line-height: 25px; text-align: center; white-space: nowrap; }

/* ===== Hero WebGL layer: only the title (with its lens) is drawn here ===== */
.hero-gl {
  position: absolute;
  left: 33px; top: 30px;
  width: 1854px; height: 893px;
  border-radius: 60px 60px 0 0;
  overflow: hidden;
  pointer-events: none;
}
.hero-gl canvas { display: block; width: 100%; height: 100%; }
/* once WebGL runs it draws the title itself; the HTML title stays for SEO/readers */
.has-hero-gl .hero__title img { opacity: 0; }

/* ===== Showcase ===== */
.showcase {
  position: relative;
  height: calc(1130px + 2400px);   /* design card height + scroll distance of the animation */
  z-index: 2;
}
.showcase__stage {
  position: sticky;
  top: 0;
  height: var(--vh, 953px);
  overflow: hidden;
  perspective: 2400px;
  perspective-origin: 50% 40%;
  /* bottom fade grows during the glide so the wall melts into the clients strip */
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - var(--fade, 0px)), transparent);
          mask-image: linear-gradient(to bottom, #000 calc(100% - var(--fade, 0px)), transparent);
}
.showcase__plane {
  position: absolute;
  left: 50%; top: 50%;
  width: 0; height: 0;
  transform-style: preserve-3d;
  will-change: transform;
}
.shot {
  position: absolute;
  width: 640px; height: 400px;
  border-radius: var(--r, 18px);
  cursor: pointer;
  will-change: transform, opacity;
  overflow: hidden;
  background: var(--bg, #f6efe0);
  box-shadow: 0 18px 40px rgba(4, 4, 14, .4);
  backface-visibility: hidden;
}
.shot img, .shot video { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
/* hover: gold ring around the lifted card */
.shot::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 0 calc(var(--lift, 0) * 5px) var(--yellow); opacity: var(--lift, 0); }
.wb-chip { position: fixed; left: 0; top: 0; z-index: 90; pointer-events: none; padding: 8px 16px; border-radius: 999px;
  background: var(--yellow); color: var(--navy); font: 700 17px var(--f-body); white-space: nowrap; opacity: 0; transition: opacity .2s; }
.wb-chip.on { opacity: 1; }
.wb-lightbox { position: fixed; inset: 0; z-index: 95; background: rgba(8, 8, 18, 0); pointer-events: none; transition: background .45s; cursor: zoom-out; }
.wb-lightbox.is-open { background: rgba(8, 8, 18, .86); pointer-events: auto; }
.wb-lightbox img { position: fixed; border-radius: 22px; object-fit: cover; object-position: top; box-shadow: 0 50px 120px rgba(0, 0, 0, .7); transition: all .55s cubic-bezier(.2, .8, .2, 1); }
.wb-lightbox__cap { position: fixed; bottom: 4vh; right: 0; left: 0; margin: 0; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; color: var(--white); opacity: 0; transition: opacity .4s .25s; }
.wb-lightbox__name { margin: 0; font-family: var(--f-hero); font-weight: 900; font-size: 56px; line-height: 1; }
.wb-lightbox__what { margin: 0; font-family: var(--f-hero); font-size: 24px; color: rgba(255, 255, 255, .7); }
.wb-lightbox__go { height: 60px; padding: 0 30px; margin-top: 8px; }
.wb-lightbox.is-open .wb-lightbox__cap { opacity: 1; }
.shot--main {
  background: radial-gradient(ellipse 60% 64% at 50% 44%, #fff 78%, #f5f5f7 90%, #ebebee 100%);
  box-shadow: 0 30px 80px rgba(4, 4, 14, calc(.5 * var(--e, 0)));
  z-index: 2;
}
/* placeholder "website" wireframe until real screenshots are dropped in */
.shot__ph { position: absolute; inset: 0; opacity: var(--ph, 1); }
.shot__ph i { position: absolute; display: block; border-radius: 6px; background: var(--ink2, rgba(0, 0, 0, .14)); }
.shot__ph .n { right: 34px; left: 34px; top: 22px; height: 10px; border-radius: 5px; opacity: .55; }
.shot__ph .t1 { right: 40px; top: 92px; width: 300px; height: 46px; background: var(--accent, #1d2240); }
.shot__ph .t2 { right: 40px; top: 150px; width: 220px; height: 46px; background: var(--accent2, #fbbd2c); }
.shot__ph .p { right: 40px; top: 216px; width: 260px; height: 9px; opacity: .6; }
.shot__ph .b { right: 40px; top: 252px; width: 120px; height: 34px; border-radius: 17px; background: var(--accent, #1d2240); }
.shot__ph .im { left: 40px; top: 70px; width: 210px; height: 230px; border-radius: 20px; background: var(--img, rgba(0, 0, 0, .12)); }

/* ===== After the showcase (positions relative to the clients strip top) ===== */
.after { position: relative; }
.after--a { height: 1402px; }          /* clients + welcome */
.after--b { height: 2043px; }          /* brand line + footer (positions below are relative to this block) */

/* ===== Clients ===== */
.clients {
  position: absolute;
  left: 33px; top: 0;
  width: 1854px; height: 288px;
  overflow: hidden;
}
.clients__track {
  position: absolute;
  top: 0; left: -990px;         /* second tile lands at page x = -22, as in the design */
  direction: ltr;
  display: flex;
  width: calc(940px * 4);
  height: 100%;
  animation: clients-marquee 40s linear infinite;
}
.clients__tile { position: relative; flex: 0 0 940px; height: 100%; }
.clients__tile img { position: absolute; left: var(--x); top: var(--y); }
@keyframes clients-marquee { from { transform: translateX(0); } to { transform: translateX(940px); } }
@media (prefers-reduced-motion: reduce) { .clients__track { animation: none; } }

/* ===== Welcome ===== */
.welcome {
  position: absolute;
  left: -380px; top: 288px;
  width: 2680px; height: 1114px;
  border-radius: 539px;
  background: var(--yellow);
  color: var(--ink);
  z-index: 2;
  overflow: hidden;
}
.welcome__line {
  position: absolute;
  border: 1px solid rgba(255, 255, 255, .7);
  pointer-events: none;
}
/* page coords are offset by the section's left: -380px */
.welcome__line--outer { left: calc(380px - 59px); right: calc(380px - 59px); top: 60px; bottom: 102px; border-radius: 228px; }
.welcome__line--inner { left: calc(380px - 119px); right: calc(380px - 119px); top: 126px; bottom: 200px; border-radius: 400px; }
.welcome__bigword {
  position: absolute;
  left: calc(380px + 1050px); top: 193px;
  font-family: var(--f-display);
  font-weight: 900;
  font-size: 240px;
  line-height: 1;
  color: var(--yellow-deep);
  transform: translateX(-50%) scaleX(.877);
  white-space: nowrap;
}
.welcome__badge {
  position: absolute;
  left: calc(380px + 142px); top: 352px;
  width: 246px; height: 246px;
  border-radius: 50%;
  background: #5e4c27;
  display: grid;
  place-items: center;
}
.welcome__text {
  position: absolute;
  right: calc(380px + 204px); top: 423px;
  font-family: var(--f-body);
  font-weight: 300;
  font-size: 35px;
  line-height: 48.3px;
  white-space: nowrap;
  text-align: right;
}
.welcome__text b { font-weight: 700; letter-spacing: -.024em; }

/* ===== Brand line (positions relative to the clients strip top) ===== */
.brandline__row {
  position: absolute;
  margin: 0;
  direction: ltr;
  font-family: var(--f-display);
  font-weight: 900;
  font-size: 150px;
  line-height: 1;
  white-space: nowrap;
  color: #4a4a58;
  transform-origin: 0 0;
  transform: scale(var(--fit, 1));   /* main.js shrinks a row that would run past the frame */
}
.brandline__row--1 { left: 58px; top: 155.3px; --sx: .812; }
.brandline__row--2 { left: 246px; top: 492.3px; --sx: .832; z-index: 3; }
/* --p (0..1) is driven by scroll in main.js; at 1 the colours match the design */
.brandline__hl { color: color-mix(in srgb, var(--to) calc(var(--p, 1) * 100%), #4a4a58); }
.brandline__dot { color: color-mix(in srgb, #fbbd2c calc(var(--p, 1) * 100%), #4a4a58); }

/* ===== Footer (top = 1185px inside .after--b) ===== */
.footer { position: absolute; left: 0; right: 0; top: 1185px; height: 858px; color: var(--white); }
.footer a { transition: color .2s; }
.footer a:hover { color: var(--yellow); }
.footer__logo { position: absolute; left: 86px; top: 0; width: 1044px; height: auto; }
.footer__rule { position: absolute; margin: 0; border: 0; border-top: 1px solid rgba(255, 255, 255, .14); }
.footer__rule--top { left: 105px; width: 1715px; top: 225px; }
.footer__rule--bottom { left: 86px; width: 1714px; top: 767px; }
.footer__col { position: absolute; top: 390px; text-align: right; }
.footer__col--contact { right: 186px; }
.footer__col--nav { right: 622px; }
.footer__title { margin: 0 0 18px; font-size: 26px; font-weight: 600; line-height: 30px; color: var(--yellow); }
.footer__list { margin: 0; padding: 0; list-style: none; font-size: 22px; font-weight: 300; line-height: 32px; }
.footer__list a[dir="ltr"] { letter-spacing: .136em; }
.footer__social { display: flex; gap: 33px; margin-top: 61px; color: var(--yellow); }
.footer__copy { position: absolute; right: 105px; top: 801px; margin: 0; font-size: 22px; font-weight: 300; line-height: 32px; }
.footer__legal { margin: 0; padding: 0; list-style: none; font-size: 22px; font-weight: 300; line-height: 32px; }
.footer__legal li { position: absolute; right: var(--r); top: 785px; }

/* ===== Menu button (mobile only) ===== */
.menu-btn { display: none; }

/* =====================================================================
   Mobile + tablet (below 1024px): real responsive layout, no zoom
   ===================================================================== */
@media (max-width: 1023px) {
  :root { --edge: 10px; --top-h: max(640px, 100svh); }
  html.menu-open { overflow: hidden; }

  .site { width: auto; padding: 0 0 var(--edge); }
  .frame {
    left: var(--edge); right: var(--edge); top: var(--edge); bottom: var(--edge);
    width: auto;
    border-radius: 28px;
  }

  /* --- top / header --- */
  .top { height: var(--top-h); }
  .hero-gl, .hero-stripes {
    left: var(--edge); right: var(--edge); top: var(--edge);
    width: auto; height: calc(100% - var(--edge));
    border-radius: 28px 28px 0 0;
  }
  .hero-stripes i { height: calc(100% + 60px); }
  .hero-stripes .hero-stripes__glow { left: -40%; top: -10%; width: 110%; height: 80%; filter: blur(120px); }
  .header {
    inset: var(--edge) var(--edge) auto;
    height: 76px;
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 22px;
  }
  .logo { position: relative; left: auto; top: auto; z-index: 3; order: 2; }
  .logo img { width: 124px; height: auto; }
  .menu-btn {
    position: relative; z-index: 3; order: 1;
    display: grid; place-content: center; gap: 7px;
    width: 46px; height: 46px; padding: 0;
    border: 1px solid rgba(255, 255, 255, .22); border-radius: 50%;
    background: rgba(255, 255, 255, .04); cursor: pointer;
  }
  .menu-btn[aria-expanded="true"] { position: fixed; top: calc(var(--edge) + 15px); right: calc(var(--edge) + 22px); }
  .menu-btn span { display: block; width: 18px; height: 1.5px; background: var(--white); border-radius: 2px; transition: transform .3s; }
  .menu-btn[aria-expanded="true"] span:first-child { transform: translateY(4.25px) rotate(45deg); }
  .menu-btn[aria-expanded="true"] span:last-child { transform: translateY(-4.25px) rotate(-45deg); }
  .nav {
    position: fixed; inset: 0; z-index: 2;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 26px;
    background: radial-gradient(circle at 30% 20%, #3a1c1c, var(--navy) 60%);
    opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s;
  }
  .nav.is-open { opacity: 1; visibility: visible; }
  .nav__item { position: relative; right: auto; top: auto; font-size: 30px; line-height: 1.2; }
  .nav__dot { left: -14px; top: -4px; width: 46px; height: 46px; }

  /* --- hero --- */
  .hero {
    inset: 0; height: 100%;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 96px 22px 64px; text-align: center;
  }
  .hero__title { position: relative; left: auto; top: auto; width: 86vw; height: auto; margin: 0 0 22px; }
  .hero__title img { width: 100%; height: auto; }
  .hero__sub { display: flex; flex-direction: column; align-items: center; gap: 14px; font-size: clamp(22px, 6.4vw, 40px); line-height: 1.15; }
  .hero__sub-a, .hero__sub-b { position: static; }
  .hero__toggle { position: static; width: 64px; height: 40px; }
  .hero__cta { position: relative; left: auto; top: auto; width: 250px; height: 60px; margin-top: 36px; display: flex; gap: 6px; }
  .hero__cta-arrow, .hero__cta-text { position: static; width: auto; }
  .hero__cta-arrow { width: 46px; height: 46px; }

  /* --- showcase --- */
  .showcase { height: calc(var(--vh, 800px) + 1500px); }

  /* --- after the showcase: everything back in normal flow --- */
  .after { height: auto; display: flex; flex-direction: column; }
  .clients { position: relative; left: auto; top: auto; width: auto; height: 170px; margin: 0 var(--edge); }
  .clients__track { zoom: .55; }

  .welcome {
    position: relative; left: auto; top: auto;
    width: auto; height: auto;
    border-radius: 36px;
    padding: 150px 26px 70px;
    display: flex; flex-direction: column; align-items: center;
  }
  .welcome__line--outer { display: none; }
  .welcome__line--inner { inset: 12px; border-radius: 28px; }
  .welcome__bigword { left: 50%; top: 26px; font-size: 34vw; transform: translateX(-50%) scaleX(.877); }
  .welcome__badge { position: relative; left: auto; top: auto; width: 110px; height: 110px; margin: 0 0 30px; }
  .welcome__badge svg { width: 62px; height: auto; transform: none !important; }
  .welcome__text { position: relative; right: auto; top: auto; white-space: normal; font-size: 18px; line-height: 1.7; max-width: 560px; }
  .welcome__text br { display: none; }   /* on narrow screens the text flows as one paragraph */

  .brandline { position: relative; padding: 90px 0 30px; overflow: visible; }
  .brandline__row {
    position: relative; left: auto; top: auto; display: block;
    font-size: 14.5vw; line-height: .96;
  }
  .brandline__row--1 { margin-left: 4vw; }
  .brandline__row--2 { margin-left: 7vw; }

  .footer {
    position: relative; left: auto; right: auto; top: auto; height: auto;
    display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 18px;
    padding: 70px 30px 34px;
  }
  .footer__logo { position: static; width: 100%; grid-column: 1 / -1; }
  .footer__rule { position: static; width: auto; grid-column: 1 / -1; margin: 26px 0 30px; }
  .footer__col { position: static; }
  .footer__col--nav { margin-top: 30px; }
  .footer__title { font-size: 19px; margin-bottom: 10px; }
  .footer__list { font-size: 16px; line-height: 30px; }
  .footer__list a[dir="ltr"] { letter-spacing: .04em; }
  .footer__social { margin-top: 18px; gap: 16px; }
  .footer__icon svg { width: 40px; height: 40px; }
  .footer__copy { position: static; grid-column: 1 / -1; order: 10; font-size: 14px; margin-top: 10px; }
  .footer__legal { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 4px 20px; font-size: 15px; }
  .footer__legal li { position: static; }
}

@media (max-width: 1023px) and (min-width: 700px) {
  .hero__title { font-size: 22vw; }
  .welcome { padding-top: 190px; }
  .welcome__text { font-size: 21px; }
  .footer { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 90px 60px 40px; }
  .footer__col--nav { margin-top: 0; }
}

/* ===== Welcome: when it comes into view the switch flips from dark to yellow and the words come in ===== */
.welcome__badge { background: var(--navy); transition: background .9s .55s var(--ease-out, ease); }
.welcome__track { fill: #23243a; transition: fill .9s .55s; }
.welcome__knob { fill: #4b4c66; transform: translateX(-45px); transition: transform .9s .55s cubic-bezier(.7, 0, .2, 1), fill .9s .55s; }
.welcome.on .welcome__badge { background: #5e4c27; }
.welcome.on .welcome__track { fill: #5e4c27; }
.welcome.on .welcome__knob { fill: #FBBD2C; transform: none; }
.welcome__line { opacity: 0; transform: scale(.96); transition: opacity 1.2s, transform 1.6s var(--ease-out, ease); }
.welcome__line--inner { transition-delay: .15s; }
.welcome.on .welcome__line { opacity: 1; transform: none; }
.welcome__bigword { opacity: 0; translate: 160px 0; transition: opacity 1.2s .1s, translate 1.8s .1s var(--ease-out, ease); }
.welcome.on .welcome__bigword { opacity: 1; translate: 0 0; }
.welcome__text { opacity: 0; translate: 0 34px; transition: opacity 1s .95s, translate 1.2s .95s var(--ease-out, ease); }
.welcome__text b { color: rgba(18, 19, 37, .35); transition: color 1s 1.6s; }
.welcome.on .welcome__text { opacity: 1; translate: 0 0; }
.welcome.on .welcome__text b { color: inherit; }
@media (prefers-reduced-motion: reduce) {
  .welcome__badge, .welcome__track, .welcome__knob, .welcome__line, .welcome__bigword, .welcome__text, .welcome__text b { transition: none; }
}