/* Layout: oversized left-weighted type, asymmetric 12-col grid, hairline-free; one violet glow per section max */
    @font-face {
      font-family: "Sora";
      font-style: normal;
      font-weight: 400 800;
      font-display: optional;
      src: url("../fonts/sora-latin-ext.woff2") format("woff2");
      unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
    }
    @font-face {
      font-family: "Sora";
      font-style: normal;
      font-weight: 400 800;
      font-display: optional;
      src: url("../fonts/sora-latin.woff2") format("woff2");
      unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
    }
    @font-face {
      font-family: "Manrope";
      font-style: normal;
      font-weight: 400 600;
      font-display: optional;
      src: url("../fonts/manrope-latin-ext.woff2") format("woff2");
      unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
    }
    @font-face {
      font-family: "Manrope";
      font-style: normal;
      font-weight: 400 600;
      font-display: optional;
      src: url("../fonts/manrope-latin.woff2") format("woff2");
      unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
    }
    @font-face {
      font-family: "Playfair Display";
      font-style: italic;
      font-weight: 400 500;
      font-display: optional;
      src: url("../fonts/playfair-italic-latin-ext.woff2") format("woff2");
      unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
    }
    @font-face {
      font-family: "Playfair Display";
      font-style: italic;
      font-weight: 400 500;
      font-display: optional;
      src: url("../fonts/playfair-italic-latin.woff2") format("woff2");
      unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
    }

    /* Lenis layout rules are local so smooth scrolling cannot block first paint. */
    html.lenis,
    html.lenis body { height: auto; }
    .lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
    .lenis [data-lenis-prevent],
    .lenis [data-lenis-prevent-wheel],
    .lenis [data-lenis-prevent-touch],
    .lenis [data-lenis-prevent-vertical],
    .lenis [data-lenis-prevent-horizontal] { overscroll-behavior: contain; }
    .lenis.lenis-smooth iframe { pointer-events: none; }
    .lenis.lenis-autoToggle {
      transition-property: overflow;
      transition-duration: 1ms;
      transition-behavior: allow-discrete;
    }

    .hero-loading .hero .eyebrow,
    .hero-loading .hero h1,
    .hero-loading .hero .ctas,
    .hero-loading .hero-note,
    .hero-loading .planet,
    .hero-loading .trust { visibility: hidden; }

    @media (prefers-reduced-motion: reduce) {
      .hero-loading .hero .eyebrow,
      .hero-loading .hero h1,
      .hero-loading .hero .ctas,
      .hero-loading .hero-note,
      .hero-loading .planet,
      .hero-loading .trust { visibility: visible; }
    }

    :root {
      --ink: #0F0E12;
      --char: #17161B;
      --char-2: #1F1D25;
      --line: #2C2933;
      --paper: #F1EEF6;
      --mute: #9A95A6;
      --violet: #8B5CF6;
      --violet-hi: #B49BFF;
      --violet-deep: #5B21B6;
      --display: "Sora", "Manrope", system-ui, sans-serif;
      --body: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
      --serif: "Playfair Display", Georgia, "Times New Roman", serif;
      --gut: max(20px, env(safe-area-inset-left, 0px));
      color-scheme: dark;
    }

    * {
      box-sizing: border-box;
    }

    html {
      scroll-behavior: smooth;
    }

    body {
      margin: 0;
      background: var(--ink);
      color: var(--paper);
      font-family: var(--body);
      font-size: 16px;
      line-height: 1.6;
      -webkit-font-smoothing: antialiased;
      overflow-x: hidden;
    }

    a {
      color: inherit;
      text-decoration: none;
    }

    ::selection {
      background: var(--violet);
      color: var(--paper);
    }

    .wrap {
      max-width: 1360px;
      margin: 0 auto;
      padding-left: max(20px, env(safe-area-inset-left, 0px));
      padding-right: max(20px, env(safe-area-inset-right, 0px));
    }

    @media (min-width: 900px) {
      .wrap {
        padding-left: max(48px, env(safe-area-inset-left, 0px));
        padding-right: max(48px, env(safe-area-inset-right, 0px));
      }
    }

    .it {
      font-family: var(--serif);
      font-style: italic;
      font-weight: 400;
      letter-spacing: 0;
    }

    .eyebrow {
      font-family: var(--display);
      font-size: 12px;
      letter-spacing: .18em;
      text-transform: uppercase;
      color: var(--mute);
      display: flex;
      gap: 12px;
      align-items: center;
    }

    .eyebrow::before {
      content: "";
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--violet);
      box-shadow: 0 0 12px var(--violet);
    }

    h1,
    h2,
    h3 {
      font-family: var(--display);
      margin: 0;
      text-wrap: balance;
    }

    :focus-visible {
      outline: 2px solid var(--violet-hi);
      outline-offset: 4px;
      border-radius: 4px;
    }

    /* nav */
    .nav {
      position: sticky;
      top: 0;
      z-index: 50;
      padding-inline: 0;
      background: #fff;
      color: var(--ink);
      border-bottom: 1px solid #f0edf3;
      transition: top .35s ease, padding .35s ease, background .35s ease, border-color .35s ease, box-shadow .35s ease;
    }

    .nav .wrap {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 86px;
      max-width: 1500px;
      border: 1px solid transparent;
      border-radius: 0;
      background: transparent;
      box-shadow: none;
      transition: height .35s ease, max-width .35s ease, padding .35s ease, border-color .35s ease, border-radius .35s ease, background .35s ease, box-shadow .35s ease;
    }

    .nav.is-scrolled {
      top: max(10px, env(safe-area-inset-top, 0px));
      padding-inline: 12px;
      background: transparent;
      border-color: transparent;
      box-shadow: none;
    }

    .nav.is-scrolled .wrap {
      height: 74px;
      max-width: 1460px;
      padding-inline: clamp(18px, 3vw, 38px);
      border-color: rgba(255, 255, 255, .76);
      border-radius: 22px;
      background: linear-gradient(115deg, rgba(255, 255, 255, .78), rgba(250, 247, 255, .62));
      box-shadow: 0 16px 46px rgba(35, 20, 57, .14), 0 2px 12px rgba(114, 74, 173, .08), inset 0 1px 0 rgba(255, 255, 255, .92);
      backdrop-filter: blur(26px) saturate(185%);
      -webkit-backdrop-filter: blur(26px) saturate(185%);
    }

    .logo {
      font-family: var(--display);
      font-weight: 800;
      font-size: 20px;
      letter-spacing: .06em;
    }

    .logo span {
      color: var(--violet);
    }

    .nav ul {
      display: none;
      align-items: center;
      list-style: none;
      margin: 0;
      padding: 0;
      gap: clamp(16px, 2.8vw, 44px);
      font-size: 15px;
      line-height: 1;
      color: #19171d;
    }

    .nav-menu > li {
      display: flex;
      align-items: center;
      min-height: 44px;
    }

    .nav-menu > li > a {
      display: inline-flex;
      align-items: center;
      min-height: 44px;
      line-height: 1;
    }

    .nav ul a:hover {
      color: var(--violet-deep);
    }

    @media (min-width: 900px) {
      .nav ul {
        display: flex;
      }
    }

    @media (max-width: 899px) {
      .nav nav {
        margin-left: auto;
        margin-right: clamp(8px, 2vw, 18px);
      }

      .nav ul {
        display: flex;
        gap: 0;
        font-size: 12px;
      }

      .nav ul li:not(.nav-careers) {
        display: none;
      }

      .nav ul a {
        white-space: nowrap;
      }
    }

    .pill {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      border-radius: 999px;
      padding: 12px 22px;
      font-family: var(--display);
      font-weight: 600;
      font-size: 14px;
      border: 1px solid var(--line);
      transition: background .3s, border-color .3s, color .3s;
      cursor: pointer;
      background: none;
      color: var(--paper);
    }

    .pill:hover {
      border-color: var(--violet);
    }

    .pill.solid {
      background: var(--violet);
      border-color: var(--violet);
      color: #fff;
    }

    .pill.solid:hover {
      background: var(--violet-hi);
      border-color: var(--violet-hi);
      color: var(--ink);
    }

    .nav .pill.solid {
      flex: 0 0 auto;
      align-self: center;
      justify-content: center;
      min-height: 48px;
      white-space: nowrap;
      line-height: 1;
      text-align: center;
      background: #08080a;
      border-color: #08080a;
      color: #fff;
    }

    .nav .pill.solid:hover {
      background: #6527d9;
      border-color: #6527d9;
      color: #fff;
    }

    .pill .arr {
      transition: transform .3s;
    }

    .pill:hover .arr {
      transform: translateX(4px) rotate(-45deg);
    }

    /* light editorial hero */
    .hero {
      position: relative;
      min-height: calc(100svh - 86px);
      padding-block: 10px 54px;
      overflow: hidden;
      background: #fff;
      color: #08080a;
      isolation: isolate;
    }

    .hero::before {
      content: "";
      position: absolute;
      inset: auto -12% -32% 48%;
      height: 78%;
      background: radial-gradient(ellipse at center, rgba(124, 58, 237, .12), rgba(124, 58, 237, 0) 67%);
      pointer-events: none;
      z-index: -2;
    }

    .glow {
      position: absolute;
      border-radius: 50%;
      filter: blur(90px);
      pointer-events: none;
      background: radial-gradient(circle, var(--violet) 0%, transparent 70%);
      opacity: .35;
    }

    .hero .wrap {
      max-width: 1500px;
      position: relative;
    }

    .hero .glow {
      display: none;
    }

    .hero-grid {
      display: grid;
      gap: 42px;
      position: relative;
      z-index: 2;
    }

    .hero-copy {
      position: relative;
      z-index: 3;
      min-width: 0;
    }

    .hero .eyebrow {
      color: #626171;
      margin: 0;
    }

    .hero .eyebrow::before {
      width: 38px;
      height: 2px;
      border-radius: 0;
      box-shadow: none;
    }

    .hero h1 {
      font-weight: 800;
      font-size: clamp(54px, 7.7vw, 126px);
      line-height: .86;
      letter-spacing: -.065em;
      text-transform: uppercase;
      position: relative;
      margin-top: 36px;
    }

    .hero h1 .row {
      display: block;
      overflow: hidden;
      padding-bottom: .04em;
    }

    .hero h1 .row > span {
      display: inline-block;
      will-change: transform, opacity;
    }

    .hero h1 .it {
      text-transform: none;
      color: #6527d9;
      font-size: 1.09em;
      letter-spacing: -.055em;
      line-height: .75;
      transform: translateY(-.02em);
    }

    .hero .ctas {
      display: flex;
      flex-wrap: wrap;
      gap: 14px;
      margin-top: 34px;
    }

    .hero .pill {
      border-color: #17161b;
      color: #111015;
      padding: 14px 30px;
      background: rgba(255, 255, 255, .72);
    }

    .hero .pill.solid {
      background: #6317e9;
      border-color: #6317e9;
      color: #fff;
      box-shadow: 0 12px 32px rgba(99, 23, 233, .2);
    }

    .hero .pill:hover {
      border-color: #6317e9;
      color: #6317e9;
    }

    .hero .pill.solid:hover {
      background: #5110c5;
      color: #fff;
    }

    .hero-side {
      position: relative;
      z-index: 2;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      min-width: 0;
      min-height: 410px;
      padding-top: 20px;
    }

    .hero-note {
      border-left: 1px solid #dedbe5;
      padding-left: 44px;
      max-width: 480px;
    }

    .hero-kicker {
      width: 38px;
      height: 2px;
      background: #6d28d9;
      margin-bottom: 22px;
    }

    .hero-note h2 {
      font-size: clamp(24px, 2vw, 34px);
      line-height: 1.18;
      letter-spacing: -.035em;
    }

    .hero-note > p {
      font-size: 17px;
      line-height: 1.55;
      color: #656171;
      margin: 18px 0 0;
      max-width: 44ch;
    }

    .metric {
      display: flex;
      align-items: center;
      gap: 22px;
      width: max-content;
      max-width: 100%;
      margin-top: 32px;
      padding: 15px 25px;
      border: 1px solid #ded0fb;
      border-radius: 18px;
      background: rgba(255, 255, 255, .7);
      box-shadow: 0 18px 55px rgba(82, 37, 142, .06);
    }

    .metric strong {
      font-family: var(--display);
      font-size: clamp(27px, 3vw, 48px);
      line-height: 1;
      color: #5f20db;
      letter-spacing: -.05em;
      white-space: nowrap;
    }

    .metric span {
      border-left: 1px solid #cfc8dc;
      padding-left: 20px;
      color: #5f5b68;
      line-height: 1.35;
      font-size: 14px;
      max-width: 18ch;
    }

    .planet {
      position: absolute;
      width: min(720px, 50vw);
      right: -2%;
      bottom: -15%;
      z-index: 1;
      pointer-events: none;
      filter: saturate(1.05) contrast(1.04);
      will-change: transform, opacity;
    }

    .trust {
      position: relative;
      z-index: 4;
      align-self: flex-start;
      display: flex;
      align-items: center;
      gap: 14px;
      margin: 64px 0 0 44px;
      border: 1px solid #e2d5fc;
      border-radius: 999px;
      padding: 11px 22px 11px 12px;
      background: rgba(255, 255, 255, .92);
      box-shadow: 0 18px 50px rgba(69, 38, 113, .12);
      backdrop-filter: blur(10px);
    }

    .trust-faces {
      display: flex;
      align-items: center;
      padding-left: 7px;
    }

    .trust-face {
      display: block;
      width: 42px;
      height: 42px;
      margin-left: -7px;
      border: 2px solid #fff;
      border-radius: 50%;
      background-color: #d9d1e8;
      background-image: url('../images/testimonial-faces.webp');
      background-repeat: no-repeat;
      background-size: 400% 200%;
      background-position: var(--face-x, 0%) var(--face-y, 0%);
      box-shadow: 0 2px 8px rgba(32, 20, 49, .14);
    }

    .trust-copy {
      line-height: 1.25;
      white-space: nowrap;
    }

    .stars {
      display: block;
      color: #6d28d9;
      font-size: 15px;
      letter-spacing: 2px;
    }

    .trust small {
      color: #686371;
      font-size: 12px;
    }

    @media (min-width: 960px) {
      .hero-grid {
        grid-template-columns: minmax(0, 7fr) minmax(360px, 5fr);
        align-items: start;
      }
      .hero-copy {
        padding-right: 20px;
        margin-top: 20px;
      }
      .hero h1 {
        white-space: nowrap;
      }
    }

    @media (max-width: 959px) {
      .hero {
        min-height: auto;
        padding-bottom: 72px;
      }
      .hero-side {
        min-height: 430px;
        padding-top: 0;
      }
      .hero-note {
        border-left: 0;
        padding: 0;
      }
      .planet {
        width: 720px;
        max-width: none;
        right: -150px;
        bottom: -210px;
        opacity: .94;
      }
      .trust {
        margin: 58px 0 0;
      }
      .hero h1 {
        font-size: clamp(52px, 13vw, 96px);
      }
    }

    @media (max-width: 560px) {
      .nav .wrap {
        height: 72px;
        gap: 12px;
      }
      .nav.is-scrolled {
        padding-inline: 8px;
      }
      .nav.is-scrolled .wrap {
        height: 66px;
        padding-inline: 14px;
        border-radius: 18px;
      }
      .nav .pill {
        padding: 9px 12px;
        font-size: 11px;
        white-space: nowrap;
      }
      .nav .pill.solid {
        min-height: 40px;
      }
      .hero {
        padding-top: 10px;
      }
      .hero .eyebrow {
        font-size: 10px;
        letter-spacing: .14em;
      }
      .hero h1 {
        font-size: clamp(41px, 12.7vw, 68px);
        margin-top: 28px;
      }
      .hero .ctas {
        display: grid;
      }
      .hero .pill {
        justify-content: center;
      }
      .hero-side {
        min-height: 470px;
      }
      .hero-note {
        width: 100%;
      }
      .hero-note h2 {
        font-size: 24px;
        overflow-wrap: anywhere;
      }
      .metric {
        padding: 13px 16px;
        gap: 14px;
      }
      .trust {
        width: 100%;
        max-width: 100%;
        margin: 54px 0 0;
        padding: 8px 12px 8px 8px;
        gap: 8px;
      }
      .trust-face {
        width: 35px;
        height: 35px;
        margin-left: -6px;
      }
      .trust-copy {
        white-space: normal;
      }
      .trust small {
        font-size: 10px;
      }
      .planet {
        width: 680px;
        right: -120px;
        bottom: -255px;
      }
    }

    @media (max-width: 400px) {
      .nav .pill {
        font-size: 0;
      }
      .nav .pill::before {
        content: "Start";
        font-size: 11px;
      }
      .nav .pill .arr {
        font-size: 11px;
      }
    }

    .marquee {
      /* border-block:2px solid #00000014; */
      overflow: hidden;
      white-space: nowrap;
      padding-block: 18px;
      background: #f2edff;
      font-family: var(--display);
      font-weight: 600;
      font-size: clamp(18px, 2.4vw, 28px);
      color: var(--violet-deep);
    }

    .marquee .track {
      display: inline-flex;
      gap: 48px;
      animation: slide 38s linear infinite;
    }

    .marquee .track span {
      display: inline-flex;
      gap: 48px;
      align-items: center;
    }

    .marquee .track span::after {
      content: "✦";
      color: #7c3aed;
      font-size: .7em;
    }

    @keyframes slide {
      to {
        transform: translateX(-50%);
      }
    }

    /* section heads */
    section {
      position: relative;
    }

    .sec {
      padding: 100px 0 0;
    }

    .head {
      display: grid;
      gap: 24px;
      margin-bottom: clamp(40px, 6vw, 80px);
    }

    @media (min-width: 900px) {
      .head {
        grid-template-columns: 4fr 8fr;
        align-items: end;
      }
    }

    .head h2 {
      font-size: clamp(36px, 5.6vw, 84px);
      line-height: .98;
      letter-spacing: -.035em;
      font-weight: 700;
    }

    .head h2 .it {
      color: var(--violet-hi);
    }

    .head p {
      color: var(--mute);
      max-width: 46ch;
      margin: 0;
    }

    /* services: white index list + sticky live preview */
    .services-index-section {
      padding: 100px 0;
      overflow: clip;
      background: #fff;
      color: var(--ink);
    }

    .services-index-section .wrap {
      max-width: 1540px;
    }

    .services-index-section .head {
      display: block;
      margin-bottom: clamp(46px, 5vw, 70px);
    }

    .services-index-badge {
      display: inline-flex;
      align-items: center;
      padding: 8px 17px;
      border: 1px solid #0f0e12;
      border-radius: 999px;
      background: #fff;
      color: #6422e8;
      font-family: var(--display);
      font-size: 11px;
      font-weight: 700;
      letter-spacing: .05em;
      text-transform: uppercase;
    }

    .services-index-section .head h2 {
      max-width: none;
      margin-top: 25px;
      color: #0f0e12;
      font-size: clamp(48px, 4vw, 64px);
      font-weight: 700;
      letter-spacing: -.06em;
      line-height: .91;
    }

    .services-index-section .head h2 .it {
      color: #6827e8;
    }

    .services-heading-line {
      display: block;
      white-space: nowrap;
    }

    .services-index-grid {
      display: grid;
      gap: 40px;
    }

    .services-index-list {
      margin: 0;
      padding: 0;
      border-top: 1px solid #dedbe3;
      list-style: none;
    }

    .services-index-item {
      border-bottom: 1px solid #dedbe3;
    }

    .services-index-btn {
      all: unset;
      box-sizing: border-box;
      display: grid;
      grid-template-columns: auto minmax(0, 1fr) auto;
      align-items: baseline;
      gap: 20px;
      width: 100%;
      padding-block: 22px;
      cursor: pointer;
    }

    .services-index-btn .services-key {
      min-width: 2.5ch;
      color: #8b8792;
      font-family: var(--display);
      font-size: 12px;
      letter-spacing: .1em;
    }

    .services-index-btn .services-title {
      color: #aaa6b0;
      font-family: var(--display);
      font-size: clamp(26px, 3.6vw, 52px);
      font-weight: 700;
      letter-spacing: -.03em;
      line-height: 1.05;
      transition: color .35s, transform .45s cubic-bezier(.2, .8, .2, 1);
    }

    .services-index-btn .services-plus {
      color: #8b8792;
      font-family: var(--display);
      font-size: 24px;
      transition: transform .4s, color .3s;
    }

    .services-index-item.on .services-title {
      color: #0f0e12;
      transform: translateX(12px);
    }

    .services-index-item.on .services-title .it {
      color: #6827e8;
    }

    .services-index-item.on .services-plus {
      color: #6d28e8;
      transform: rotate(45deg);
    }

    .services-index-body {
      display: grid;
      grid-template-rows: 0fr;
      transition: grid-template-rows .5s cubic-bezier(.2, .8, .2, 1);
    }

    .services-index-body > div {
      overflow: hidden;
    }

    .services-index-item.on .services-index-body {
      grid-template-rows: 1fr;
    }

    .services-index-body p {
      max-width: 52ch;
      margin: 0 0 24px;
      padding-left: calc(2.5ch + 20px);
      color: #6d6875;
    }

    .services-index-body a {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      margin: 0 0 26px calc(2.5ch + 20px);
      color: #6827e8;
      font-size: 14px;
      font-weight: 700;
      text-decoration: none;
    }

    .services-index-body a span {
      transition: transform .2s ease;
    }

    .services-index-body a:hover span,
    .services-index-body a:focus-visible span {
      transform: translateX(4px);
    }

    .services-panel {
      position: sticky;
      top: 110px;
      display: none;
      min-height: 460px;
      align-self: start;
      flex-direction: column;
      justify-content: space-between;
      padding: 36px;
      overflow: hidden;
      border: 1px solid #302a3b;
      border-radius: 28px;
      background: radial-gradient(circle at 88% 90%, rgba(109, 40, 232, .23), transparent 36%), var(--char);
      color: var(--paper);
      box-shadow: 0 28px 80px rgba(35, 22, 59, .16);
      isolation: isolate;
    }

    .services-panel > :not(.services-panel-glow) {
      position: relative;
      z-index: 1;
    }

    .services-panel-glow {
      right: -120px;
      bottom: -120px;
      width: 360px;
      height: 360px;
      opacity: .4;
    }

    .services-panel-art {
      position: relative;
      height: 150px;
      margin-bottom: 28px;
    }

    .services-panel h3 {
      margin: 0;
      font-family: var(--display);
      font-size: 30px;
      font-weight: 700;
      letter-spacing: -.02em;
      line-height: 1.1;
    }

    .services-panel p {
      margin: 14px 0 0;
      color: var(--mute);
    }

    .services-deliverables {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin: 28px 0 0;
      padding: 0;
      list-style: none;
    }

    .services-deliverables li {
      padding: 7px 14px;
      border-radius: 999px;
      background: var(--char-2);
      color: var(--paper);
      font-size: 13px;
    }

    .services-panel-link {
      display: inline-flex;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
      width: 100%;
      margin-top: 24px;
      padding: 15px 18px;
      border: 1px solid rgba(255, 255, 255, .15);
      border-radius: 999px;
      color: var(--paper);
      font-size: 14px;
      font-weight: 700;
      text-decoration: none;
    }

    .services-panel-link span {
      color: #b49bff;
      font-size: 20px;
      transition: transform .2s ease;
    }

    .services-panel-link:hover span,
    .services-panel-link:focus-visible span {
      transform: translateX(4px);
    }

    .services-panel .services-swap {
      transition: opacity .35s, transform .45s cubic-bezier(.2, .8, .2, 1);
    }

    .services-panel.out .services-swap {
      opacity: 0;
      transform: translateY(10px);
    }

    @media (min-width: 1000px) {
      .services-index-grid {
        grid-template-columns: minmax(0, 7fr) minmax(360px, 5fr);
        gap: 64px;
      }
      .services-index-body {
        display: none;
      }
      .services-panel {
        display: flex;
      }
    }

    @media (max-width: 620px) {
      .services-index-section {
        padding: 100px 0;
      }
      .services-index-btn {
        gap: 13px;
        padding-block: 19px;
      }
      .services-index-btn .services-title {
        font-size: clamp(24px, 7.4vw, 38px);
      }
      .services-index-section .head h2 {
        font-size: clamp(38px, 10vw, 52px);
      }
      .services-index-body p {
        padding-left: 0;
      }
    }

    /* services: editorial intro + horizontal accordion */
    .services-section {
      background: #fff;
      color: #0d0c10;
      overflow: hidden;
      padding: 100px 0 0;
    }

    .services-section .wrap {
      max-width: 1540px;
    }

    .svc {
      display: grid;
      grid-template-columns: minmax(500px, 4fr) minmax(0, 8fr);
      gap: clamp(32px, 4vw, 64px);
      align-items: center;
      border-bottom: 1px solid #e3e3e336;
    }

    .svc-intro {
      position: relative;
      min-height: 700px;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      overflow: hidden;
      isolation: isolate;
    }

    .svc-intro > .svc-badge,
    .svc-intro > h2,
    .svc-intro > p,
    .svc-intro > .svc-explore {
      position: relative;
      z-index: 3;
    }

    .svc-badge {
      display: inline-flex;
      padding: 8px 18px;
      border-radius: 999px;
      background: #f2edff;
      color: #6422e8;
      font-family: var(--display);
      font-weight: 700;
      font-size: 12px;
      letter-spacing: .04em;
      text-transform: uppercase;
    }

    .svc-intro h2 {
      width: 100%;
      max-width: 500px;
      font-size: clamp(46px, 3.5vw, 56px);
      line-height: .94;
      letter-spacing: -.06em;
      margin-top: 28px;
    }

    .svc-intro h2 .svc-line {
      display: block;
      white-space: nowrap;
    }

    .svc-intro h2 .it {
      color: #6827e8;
      font-size: 1.08em;
    }

    .svc-intro > p {
      margin: 30px 0 0;
      color: #686572;
      font-size: 18px;
      line-height: 1.55;
      max-width: 34ch;
    }

    .svc-explore {
      margin-top: 30px;
      background: #0b0a0d !important;
      border-color: #0b0a0d !important;
      color: #fff !important;
      padding: 14px 28px;
    }

    .hero .pill:hover,
    .nav .pill.solid:hover {
      background: #0b0a0d !important;
      border-color: #0b0a0d !important;
      color: #fff !important;
      box-shadow: none;
    }

    .svc-values {
      position: absolute;
      left: 3px;
      bottom: 66px;
      z-index: 2;
      display: grid;
      gap: 2px;
      color: #777481;
      font-family: var(--display);
      font-size: 10px;
      font-weight: 600;
      line-height: 1.45;
      letter-spacing: .25em;
      text-transform: uppercase;
      pointer-events: none;
    }

    .svc-values::after {
      content: "";
      width: 38px;
      height: 1px;
      margin-top: 11px;
      background: #3f3d44;
    }

    .svc-abstract {
      position: absolute;
      left: -6%;
      bottom: 0%;
      z-index: 0;
      width: 108%;
      height: auto;
      pointer-events: none;
    }

    .svc-list {
      display: flex;
      gap: 10px;
      min-width: 0;
      height: 600px;
    }

    .svc-card {
      position: relative;
      flex: 0 0 68px;
      min-width: 0;
      border: 1px solid #e5e2e9;
      border-radius: 24px;
      background: #fbfbfc;
      overflow: hidden;
      transition: flex-basis .72s cubic-bezier(.2, .8, .2, 1), background .45s, box-shadow .45s;
    }

    .svc-card.on {
      flex: 1 1 390px;
      background: linear-gradient(145deg, #fff 0%, #f4efff 58%, #fff 100%);
      box-shadow: 0 24px 70px rgba(91, 33, 182, .12);
    }

    .svc-tab {
      all: unset;
      box-sizing: border-box;
      position: absolute;
      inset: 0;
      cursor: pointer;
      z-index: 3;
    }

    .svc-rail {
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 28px 0 22px;
      transition: opacity .25s, transform .4s;
    }

    .svc-card.on .svc-rail {
      opacity: 0;
      pointer-events: none;
      transform: translateY(10px);
    }

    .svc-index {
      font-family: var(--display);
      font-size: 18px;
      color: #74717d;
    }

    .svc-icon {
      display: grid;
      place-items: center;
      width: 44px;
      height: 44px;
      margin-top: 26px;
      border-radius: 50%;
      background: #f1f0f3;
      color: #17151c;
      font-family: var(--display);
      font-size: 18px;
    }

    .svc-vertical {
      margin: auto 0;
      font-family: var(--display);
      font-weight: 600;
      font-size: 17px;
      line-height: 1;
      writing-mode: vertical-rl;
      transform: rotate(180deg);
      white-space: nowrap;
    }

    .svc-arrow {
      display: grid;
      place-items: center;
      width: 44px;
      height: 44px;
      border: 1px solid #d9d6df;
      border-radius: 50%;
      font-size: 19px;
    }

    .svc-expanded {
      position: absolute;
      inset: 0;
      padding: 26px 30px 24px;
      display: flex;
      flex-direction: column;
      opacity: 0;
      transform: translateY(12px);
      pointer-events: none;
      transition: opacity .35s .08s, transform .5s .08s;
    }

    .svc-card.on .svc-expanded {
      opacity: 1;
      transform: none;
    }

    .svc-card-top {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .svc-card-top .svc-index {
      font-size: 24px;
      color: #6723e9;
      font-weight: 600;
    }

    .svc-active {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      border: 1px solid #dcd1f8;
      background: rgba(255, 255, 255, .7);
      border-radius: 999px;
      padding: 5px 12px;
      color: #6a28e5;
      font-size: 10px;
      letter-spacing: .16em;
      text-transform: uppercase;
    }

    .svc-active::before {
      content: "";
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: #7132ef;
    }

    .svc-visual {
      height: 200px;
      margin: 0 auto -4px;
      width: 100%;
      object-fit: contain;
      filter: drop-shadow(0 20px 25px rgba(83, 31, 170, .12));
    }

    .svc-expanded h3 {
      font-size: clamp(27px, 2.4vw, 38px);
      line-height: 1.04;
      letter-spacing: -.04em;
      max-width: 12ch;
    }

    .svc-expanded p {
      color: #6d6877;
      margin: 12px 0 0;
      font-size: 14px;
      line-height: 1.55;
      max-width: 42ch;
    }

    .svc-deliverables {
      margin-top: auto;
      padding-top: 16px;
      border-top: 1px solid #ddd8e7;
    }

    .svc-deliverables > span {
      display: block;
      color: #77727f;
      font-size: 10px;
      letter-spacing: .18em;
      text-transform: uppercase;
      margin-bottom: 12px;
    }

    .svc-deliverables ul {
      list-style: none;
      padding: 0;
      margin: 0;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 9px 16px;
    }

    .svc-deliverables li {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 12px;
      color: #211e27;
    }

    .svc-deliverables li::before {
      content: "✓";
      display: grid;
      place-items: center;
      flex: 0 0 18px;
      height: 18px;
      border-radius: 50%;
      background: #6d28e8;
      color: #fff;
      font-size: 10px;
    }

    @media (max-width: 1190px) and (min-width: 1000px) {
      .svc {
        grid-template-columns: minmax(280px, 3fr) minmax(0, 7fr);
        gap: 28px;
      }
      .svc-card {
        flex-basis: 58px;
      }
      .svc-list {
        gap: 7px;
      }
      .svc-expanded {
        padding: 24px 22px;
      }
      .svc-visual {
        height: 200px;
      }
      .svc-vertical {
        font-size: 15px;
      }
    }

    @media (max-width: 999px) {
      .svc {
        grid-template-columns: 1fr;
      }
      .svc-intro {
        min-height: 560px;
      }
      .svc-intro h2 {
        width: 100%;
        max-width: 500px;
      }
      .svc-abstract {
        width: 620px;
        max-width: 100%;
        left: -5%;
        bottom: -12%;
      }
      .svc-list {
        display: grid;
        height: auto;
        gap: 10px;
      }
      .svc-card {
        height: 76px;
        flex: none;
        border-radius: 20px;
        transition: height .6s cubic-bezier(.2, .8, .2, 1);
      }
      .svc-card.on {
        height: 650px;
      }
      .svc-rail {
        flex-direction: row;
        height: 76px;
        padding: 0 18px;
        gap: 16px;
      }
      .svc-icon {
        margin: 0;
      }
      .svc-vertical {
        writing-mode: horizontal-tb;
        transform: none;
        margin: 0;
        font-size: 16px;
      }
      .svc-arrow {
        margin-left: auto;
        width: 40px;
        height: 40px;
      }
      .svc-expanded {
        padding: 24px;
      }
      .svc-visual {
        height: 200px;
      }
    }

    @media (max-width: 560px) {
      .services-section {
        padding: 100px 0 0;
      }
      .svc-intro {
        min-height: 510px;
      }
      .svc-intro h2 {
        font-size: 46px;
      }
      .svc-intro > p {
        font-size: 16px;
      }
      .svc-abstract {
        bottom: -7%;
        width: 560px;
        max-width: none;
      }
      .svc-card.on {
        height: 680px;
      }
      .svc-expanded {
        padding: 22px 18px;
      }
      .svc-visual {
        height: 200px;
      }
      .svc-deliverables ul {
        grid-template-columns: 1fr;
      }
      .svc-expanded p {
        font-size: 13px;
      }
    }

    /* Dark portfolio accordion: retains the service interaction model. */
    .portfolio-accordion {
      padding: 100px 0 0;
      background: var(--ink);
      color: #f8f7fb;
    }

    .portfolio-accordion .svc-intro {
      isolation: isolate;
    }

    .portfolio-intro-art {
      position: absolute;
      z-index: 1;
      left: 0;
      right: 0;
      bottom: 0;
      display: block;
      width: 100%;
      max-width: 100%;
      height: clamp(280px, 27vw, 390px);
      object-fit: contain;
      object-position: left bottom;
      pointer-events: none;
      user-select: none;
    }

    .portfolio-accordion .svc-badge {
      position: relative;
      z-index: 2;
      border: 0;
      background: #f2edff;
      color: #6422e8;
    }

    .portfolio-accordion .svc-intro h2 {
      position: relative;
      z-index: 2;
      color: #f8f7fb;
    }

    .portfolio-accordion .svc-intro h2 .it {
      color: #a879ff;
    }

    .portfolio-accordion .svc-intro > p {
      position: relative;
      z-index: 2;
      color: #aaa6b2;
    }

    .portfolio-accordion .svc-explore {
      background: linear-gradient(135deg, #7c3aed, #5b21b6) !important;
      border-color: #8b5cf6 !important;
      color: #fff !important;
      box-shadow: 0 16px 38px rgba(91, 33, 182, .28);
    }

    .portfolio-accordion .svc-explore:hover {
      background: #f8f7fb !important;
      border-color: #f8f7fb !important;
      color: #100d16 !important;
      box-shadow: none;
    }

    .portfolio-accordion .svc-card {
      border-color: rgba(255, 255, 255, .12);
      background: #111015;
      color: #f6f4f9;
    }

    .portfolio-accordion .svc-card.on {
      background: radial-gradient(circle at 82% 8%, rgba(139, 92, 246, .22), transparent 34%), linear-gradient(145deg, #1a1423, #100d16 64%, #0c0b0f);
      box-shadow: 0 28px 76px rgba(0, 0, 0, .38), inset 0 1px 0 rgba(255, 255, 255, .06);
    }

    .portfolio-accordion .svc-index {
      color: #8c8695;
    }

    .portfolio-accordion .svc-icon {
      background: #1d1a22;
      color: #cbb7ff;
    }

    .portfolio-accordion .svc-vertical {
      color: #f1eef6;
    }

    .portfolio-accordion .svc-arrow {
      border-color: rgba(255, 255, 255, .16);
      color: #f5f1fb;
    }

    .portfolio-accordion .svc-card-top .svc-index {
      color: #a879ff;
    }

    .portfolio-accordion .svc-active {
      border-color: rgba(168, 121, 255, .38);
      background: rgba(139, 92, 246, .1);
      color: #c9afff;
    }

    .portfolio-accordion .svc-active::before {
      background: #9d68ff;
      box-shadow: 0 0 14px rgba(157, 104, 255, .72);
    }

    .portfolio-accordion .svc-visual {
      height: 230px;
      filter: drop-shadow(0 24px 32px rgba(0, 0, 0, .32));
    }

    .portfolio-accordion .svc-expanded h3 {
      color: #fff;
    }

    .portfolio-accordion .svc-expanded p {
      color: #aaa5b1;
    }

    .portfolio-accordion .svc-deliverables {
      border-top-color: rgba(255, 255, 255, .12);
    }

    .portfolio-accordion .svc-deliverables > span {
      color: #817b89;
    }

    .portfolio-accordion .svc-deliverables li {
      color: #ded9e5;
    }

    .portfolio-accordion .svc-deliverables li::before {
      background: #7c3aed;
    }

    @media (max-width: 999px) {
      .portfolio-intro-art {
        height: clamp(280px, 48vw, 390px);
      }
    }

    @media (max-width: 560px) {
      .portfolio-accordion {
        padding: 100px 0 0;
      }
      .portfolio-intro-art {
        height: 250px;
      }
      .portfolio-accordion .svc-visual {
        height: 215px;
      }
    }

    /* case studies */
    .case-studies {
      margin: 0;
      padding: 100px 0;
      overflow: hidden;
      background: var(--ink);
      color: var(--paper);
    }

    .case-studies .wrap {
      max-width: 1540px;
    }

    .case-layout {
      display: grid;
      grid-template-columns: minmax(340px, 4fr) minmax(0, 8fr);
      gap: clamp(34px, 4vw, 68px);
      align-items: start;
    }

    .case-sidebar {
      min-width: 0;
    }

    .case-badge {
      display: inline-flex;
      align-items: center;
      padding: 8px 17px;
      border: 1px solid #37313f;
      border-radius: 999px;
      background: #1b1820;
      color: var(--violet-hi);
      font-family: var(--display);
      font-size: 11px;
      font-weight: 700;
      letter-spacing: .05em;
      text-transform: uppercase;
    }

    .case-badge::before {
      content: none;
    }

    .case-sidebar h2 {
      margin-top: 25px;
      max-width: none;
      font-size: clamp(48px, 4vw, 64px);
      font-weight: 700;
      letter-spacing: -.06em;
      line-height: .91;
    }

    .case-sidebar h2 .case-line {
      display: block;
      white-space: nowrap;
    }

    .case-sidebar h2 .it {
      color: #925cff;
    }

    .case-intro {
      max-width: 39ch;
      margin: 26px 0 0;
      color: var(--mute);
      font-size: 16px;
      line-height: 1.55;
    }

    .case-tabs {
      display: grid;
      gap: 8px;
      margin-top: 34px;
    }

    .case-tab {
      width: 100%;
      min-height: 70px;
      display: grid;
      grid-template-columns: 46px minmax(0, 1fr) 38px;
      gap: 13px;
      align-items: center;
      padding: 10px 12px;
      border: 1px solid var(--line);
      border-radius: 18px;
      background: var(--char);
      color: var(--paper);
      text-align: left;
      cursor: pointer;
      transition: background .35s, border-color .35s, transform .35s, box-shadow .35s;
    }

    .case-tab:hover {
      border-color: #655577;
      background: #211d29;
      transform: translateX(4px);
    }

    .case-tab[aria-selected="true"] {
      border-color: #7b2cff;
      background: linear-gradient(108deg, #5f1fe5 0%, #7f2cff 55%, #6821e9 100%);
      box-shadow: 0 14px 38px rgba(103, 35, 224, .34);
    }

    .case-tab:focus-visible,
    .case-nav button:focus-visible {
      outline: 2px solid #b995ff;
      outline-offset: 3px;
    }

    .case-tab-num {
      display: grid;
      place-items: center;
      width: 42px;
      height: 42px;
      border-radius: 50%;
      background: #29252f;
      color: #d8d2df;
      font-family: var(--display);
      font-size: 12px;
      font-weight: 700;
    }

    .case-tab[aria-selected="true"] .case-tab-num {
      background: #fff;
      color: #6722dd;
    }

    .case-tab-copy {
      min-width: 0;
    }

    .case-tab-name {
      display: block;
      overflow: hidden;
      font-family: var(--display);
      font-size: 14px;
      font-weight: 700;
      line-height: 1.2;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .case-tab[aria-selected="true"] .case-tab-name {
      color: #fff;
    }

    .case-tab-tags {
      display: block;
      margin-top: 4px;
      overflow: hidden;
      color: var(--mute);
      font-size: 11px;
      line-height: 1.2;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .case-tab[aria-selected="true"] .case-tab-tags {
      color: #fff;
    }

    .case-tab-arrow {
      display: grid;
      place-items: center;
      width: 36px;
      height: 36px;
      border-radius: 50%;
      background: #292431;
      color: var(--violet-hi);
      font-size: 17px;
    }

    .case-tab[aria-selected="true"] .case-tab-arrow {
      background: #fff;
      color: #6d28e8;
    }

    .case-stage {
      min-width: 0;
    }

    .case-panel {
      position: relative;
      overflow: hidden;
      border: 1px solid #332d3c;
      border-radius: 30px;
      background: radial-gradient(circle at 75% 34%, rgba(139, 92, 246, .2), transparent 38%), linear-gradient(145deg, #1d1a22 0%, #151319 58%, #21192f 100%);
      box-shadow: 0 28px 80px rgba(0, 0, 0, .32);
      isolation: isolate;
    }

    .case-panel::before {
      content: "";
      position: absolute;
      right: 4%;
      top: 7%;
      width: 48%;
      aspect-ratio: 1;
      border-radius: 50%;
      background: rgba(139, 92, 246, .1);
      filter: blur(1px);
      z-index: -1;
    }

    .case-main {
      position: relative;
      min-height: 610px;
    }

    .case-copy {
      position: relative;
      z-index: 2;
      width: 46%;
      padding: 34px 0 34px 38px;
    }

    .case-number {
      display: inline-flex;
      padding: 7px 18px;
      border-radius: 999px;
      background: #2b2340;
      color: var(--violet-hi);
      font-family: var(--display);
      font-size: 12px;
      font-weight: 700;
    }

    .case-kicker {
      display: flex;
      align-items: center;
      gap: 11px;
      margin: 45px 0 0;
      color: #aaa3b4;
      font-family: var(--display);
      font-size: 10px;
      font-weight: 600;
      letter-spacing: .18em;
      text-transform: uppercase;
    }

    .case-kicker::before {
      content: "";
      width: 36px;
      height: 2px;
      background: #7c3aed;
    }

    .case-title {
      margin-top: 22px;
      font-size: clamp(34px, 3.5vw, 54px);
      font-weight: 700;
      letter-spacing: -.045em;
      line-height: .98;
    }

    .case-description {
      max-width: 31ch;
      margin: 22px 0 0;
      color: var(--mute);
      font-size: 16px;
      line-height: 1.52;
    }

    .case-cta {
      margin-top: 27px;
      background: #6d28e8 !important;
      border-color: #6d28e8 !important;
      color: #fff !important;
    }

    .case-visual {
      position: absolute;
      right: -3%;
      bottom: -2%;
      z-index: 1;
      width: 80%;
      height: 82%;
      display: grid;
      place-items: end center;
      transform-origin: 70% 78%;
      will-change: transform;
    }

    .case-visual::after {
      content: "Preview unavailable";
      display: none;
      color: #847d8f;
      font-family: var(--display);
      font-size: 13px;
    }

    .case-visual.is-missing::after {
      display: block;
      align-self: center;
    }

    .case-image {
      display: block;
      width: 90%;
      height: 100%;
      object-fit: contain;
      object-position: right bottom;
      filter: drop-shadow(0 28px 42px rgba(79, 36, 151, .18));
    }

    .case-visual.is-missing .case-image {
      display: none;
    }

    .case-footer {
      position: relative;
      z-index: 2;
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 18px;
      align-items: center;
      margin: 0;
      padding: 0 38px 26px;
      background: transparent;
    }

    .case-facts {
      min-height: 40px;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      align-items: stretch;
    }

    .case-fact {
      position: relative;
      display: flex;
      align-items: center;
      gap: 13px;
      padding: 0 clamp(12px, 1.25vw, 20px);
      min-width: 0;
    }

    .case-fact + .case-fact::before {
      content: "";
      position: absolute;
      left: 0;
      top: 50%;
      width: 1px;
      height: 36px;
      background: #393440;
      transform: translateY(-50%);
    }

    .case-fact-icon {
      display: grid;
      place-items: center;
      flex: 0 0 42px;
      height: 42px;
      border-radius: 50%;
      background: #2b2534;
      color: var(--violet-hi);
      font-size: 17px;
    }

    .case-fact-copy {
      min-width: 0;
    }

    .case-fact strong {
      display: block;
      overflow: hidden;
      font-family: var(--display);
      font-size: 17px;
      line-height: 1.15;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .case-fact small {
      display: block;
      margin-top: 5px;
      color: var(--mute);
      font-size: 10px;
      letter-spacing: .08em;
      text-transform: uppercase;
    }

    .case-nav {
      display: flex;
      gap: 10px;
    }

    .case-nav button {
      display: grid;
      place-items: center;
      width: 56px;
      height: 56px;
      border: 1px solid #3a3442;
      border-radius: 50%;
      background: #24202b;
      color: var(--violet-hi);
      font-size: 22px;
      cursor: pointer;
      transition: background .3s, border-color .3s, color .3s, transform .3s;
    }

    .case-nav button:hover {
      border-color: #7c3aed;
      background: #6d28e8;
      color: #fff;
      transform: translateY(-3px);
    }

    @media (max-width: 1300px) {
      .case-footer {
        gap: 12px;
      }
      .case-fact {
        gap: 10px;
        padding: 0 12px;
      }
      .case-fact-icon {
        flex-basis: 36px;
        height: 36px;
      }
      .case-fact strong {
        font-size: 15px;
      }
      .case-nav button {
        width: 52px;
        height: 52px;
      }
    }

    @media (max-width: 1120px) {
      .case-layout {
        grid-template-columns: 1fr;
      }
      .case-sidebar h2 {
        max-width: none;
      }
      .case-tabs {
        grid-template-columns: repeat(5, minmax(210px, 1fr));
        overflow-x: auto;
        padding-bottom: 8px;
        scrollbar-width: thin;
      }
      .case-tab {
        min-width: 210px;
      }
      .case-main {
        min-height: 590px;
      }
    }

    @media (max-width: 720px) {
      .case-studies {
        padding: 100px 0;
      }
      .case-sidebar h2 {
        font-size: clamp(46px, 12vw, 68px);
      }
      .case-panel {
        border-radius: 24px;
      }
      .case-main {
        min-height: 690px;
      }
      .case-copy {
        width: 100%;
        padding: 26px 24px;
      }
      .case-kicker {
        margin-top: 44px;
      }
      .case-title {
        max-width: 12ch;
      }
      .case-description {
        max-width: 36ch;
      }
      .case-visual {
        right: 0;
        bottom: -2%;
        width: 100%;
        height: 50%;
        opacity: .88;
      }
      .case-footer {
        grid-template-columns: 1fr;
        padding: 0 24px 24px;
      }
      .case-facts {
        grid-template-columns: 1fr;
      }
      .case-fact + .case-fact::before {
        left: 50%;
        top: 0;
        width: 60%;
        height: 1px;
        transform: translateX(-50%);
      }
      .case-nav {
        width: 100%;
        justify-content: flex-start;
      }
    }

    /* Why Retrix — editorial orbit composition */
    #why {
      padding: 0 max(12px, env(safe-area-inset-right, 0px)) 0 max(12px, env(safe-area-inset-left, 0px));
      background: var(--ink);
    }

    .why {
      position: relative;
      overflow: hidden;
      padding: 0;
      border-radius: clamp(28px, 4vw, 48px);
      background: #f8f8f9;
      color: #09090b;
    }

    .why .wrap {
      position: relative;
      max-width: 1540px;
      min-height: 900px;
      padding-top: clamp(64px, 6vw, 92px);
      padding-bottom: clamp(72px, 7vw, 110px);
    }

    .why-hero {
      position: relative;
      z-index: 2;
      min-height: 285px;
    }

    .why-kicker {
      display: inline-flex;
      align-items: center;
      margin: 0 0 28px;
      padding: 8px 18px;
      border-radius: 999px;
      background: #f2edff;
      color: #6422e8;
      font-family: var(--display);
      font-size: 12px;
      font-weight: 700;
      letter-spacing: .04em;
      line-height: 1.6;
      text-transform: uppercase;
    }

    .why-kicker::before {
      content: none;
    }

    .why-title {
      position: relative;
      z-index: 2;
      max-width: 760px;
      margin: 0;
      font-family: var(--display);
      font-size: clamp(46px, 3.5vw, 56px);
      font-weight: 800;
      letter-spacing: -.06em;
      line-height: .94;
    }

    .why-title span {
      display: block;
      white-space: nowrap;
    }

    .why-title .it,
    .why-point h3 .it {
      color: #6d28e8;
    }

    .why-branding-composition {
      position: absolute;
      z-index: 1;
      display: block;
      max-width: none;
      pointer-events: none;
      user-select: none;
      top: -60px;
      right: 0;
      width: clamp(560px, 40vw, 670px);
    }

    .why-layout {
      position: relative;
      z-index: 2;
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      gap: 58px clamp(300px, 24vw, 390px);
      min-height: 470px;
      padding-top: 8px;
    }

    .why-point {
      position: relative;
      z-index: 3;
      display: grid;
      grid-template-columns: 42px 58px minmax(0, 1fr);
      align-items: start;
      min-width: 0;
    }

    .why-point-number {
      position: relative;
      padding-top: 19px;
      color: #686772;
      font-family: var(--body);
      font-size: 13px;
      line-height: 1;
    }

    .why-point-number::after {
      content: "";
      position: absolute;
      top: 25px;
      left: 25px;
      width: 17px;
      height: 1px;
      background: #b9b8bd;
    }

    .why-point-icon {
      position: relative;
      display: grid;
      place-items: center;
      width: 50px;
      height: 50px;
      border: 1px solid #34333a;
      border-radius: 50%;
      background: #f8f8f9;
    }

    .why-point-icon svg {
      display: block;
      width: 22px;
      height: 22px;
      fill: none;
      stroke: #101014;
      stroke-width: 1.8;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .why-point-copy {
      min-width: 0;
      padding: 7px 0 0 14px;
    }

    .why-point-label {
      display: block;
      margin-bottom: 13px;
      color: #7028ef;
      font-family: var(--display);
      font-size: 13px;
      font-weight: 700;
      letter-spacing: .28em;
      line-height: 1;
      text-transform: uppercase;
    }

    .why-point h3 {
      margin: 0;
      font-family: var(--display);
      font-size: clamp(23px, 1.8vw, 30px);
      font-weight: 700;
      letter-spacing: -.055em;
      line-height: 1.08;
    }

    .why-point p {
      max-width: 36ch;
      margin: 13px 0 0;
      color: #6c6b75;
      font-size: clamp(15px, 1.22vw, 18px);
      line-height: 1.55;
    }

    .why-art {
      position: absolute;
      z-index: 1;
      top: 5px;
      left: 50%;
      width: clamp(390px, 30vw, 510px);
      aspect-ratio: 1;
      transform: translateX(-50%);
      pointer-events: none;
    }

    .why-center-orbit,
    .why-orbit-lines {
      position: absolute;
      top: 50%;
      left: 50%;
      display: block;
      max-width: none;
      transform: translate(-50%, -50%);
      user-select: none;
    }

    .why-center-orbit {
      z-index: 2;
      width: 100%;
    }

    .why-orbit-lines {
      z-index: 1;
      width: 122%;
      opacity: .5;
    }

    @media (max-width: 1220px) {
      .why-title { max-width: 760px; }
      .why-branding-composition { top: -30px; right: -110px; width: 600px; opacity: .9; }
      .why-layout { column-gap: 235px; }
      .why-point { grid-template-columns: 34px 58px minmax(0, 1fr); }
      .why-point-number { padding-top: 19px; }
      .why-point-number::after { top: 25px; left: 22px; width: 12px; }
      .why-point-icon { width: 50px; height: 50px; }
      .why-point-icon svg { width: 22px; height: 22px; }
      .why-point-copy { padding-left: 14px; }
      .why-art { width: 360px; top: 45px; }
    }

    @media (max-width: 899px) {
      .why .wrap { min-height: 0; }
      .why-hero { min-height: 350px; }
      .why-title { max-width: 710px; }
      .why-title span { white-space: normal; }
      .why-branding-composition { top: 75px; right: -245px; width: 550px; opacity: .45; }
      .why-layout {
        grid-template-columns: 1fr;
        gap: 34px;
        min-height: 0;
      }
      .why-point { max-width: 680px; }
      .why-point:nth-of-type(even) { margin-left: auto; }
      .why-art {
        position: relative;
        top: auto;
        left: auto;
        order: 3;
        width: min(460px, 86vw);
        margin: -26px auto;
        transform: none;
      }
      .why-point--one { order: 1; }
      .why-point--two { order: 2; }
      .why-point--three { order: 4; }
      .why-point--four { order: 5; }
    }

    @media (max-width: 620px) {
      .why .wrap { padding-top: 58px; padding-bottom: 72px; }
      .why-hero { min-height: 315px; }
      .why-kicker { font-size: 12px; }
      .why-title { font-size: clamp(46px, 3.5vw, 56px); line-height: .94; }
      .why-branding-composition { top: 125px; right: -230px; width: 450px; opacity: .38; }
      .why-point { grid-template-columns: 30px 58px minmax(0, 1fr); }
      .why-point-number { padding-top: 19px; font-size: 11px; }
      .why-point-number::after { top: 25px; left: 20px; width: 10px; }
      .why-point-icon { width: 50px; height: 50px; }
      .why-point-icon svg { width: 22px; height: 22px; }
      .why-point-copy { padding: 6px 0 0 12px; }
      .why-point-label { margin-bottom: 10px; font-size: 10px; }
      .why-point h3 { font-size: clamp(21px, 6vw, 28px); }
      .why-point p { margin-top: 10px; font-size: 15px; }
      .why-art { width: min(390px, 98vw); margin-block: -18px; }
    }

    /* process */
    #process {
      position: relative;
      isolation: isolate;
      overflow: hidden;
      padding: 100px 0 0;
      background: var(--ink);
      color: var(--paper);
    }

    #process .wrap {
      position: relative;
      z-index: 1;
      max-width: 1540px;
    }

    .process-planet {
      position: absolute;
      z-index: 0;
      display: block;
      width: clamp(430px, 40vw, 680px);
      height: auto;
      pointer-events: none;
      opacity: .42;
      filter: saturate(1.08) contrast(1.04);
      will-change: transform;
    }

    .process-planet-left {
      left: -20%;
      top: -30%;
      transform: rotate(30deg);
    }

    #process .head {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 22px;
      margin-bottom: clamp(54px, 6vw, 86px);
      text-align: center;
    }

    .process-badge {
      margin: 0;
      padding: 8px 17px;
      font-size: 11px;
    }

    #process .proc-title {
      font-size: clamp(48px, 4vw, 64px);
      font-weight: 700;
      line-height: .91;
      letter-spacing: -.06em;
    }

    .proc-title .proc-line {
      display: block;
      white-space: nowrap;
    }

    .proc-title .it {
      font-size: 1.08em;
    }

    .proc {
      display: grid;
      gap: 0;
      border-top: 1px solid var(--line);
    }

    @media (min-width: 900px) {
      .proc {
        grid-template-columns: repeat(4, 1fr);
        border-top: none;
      }
    }

    .step {
      padding: 32px 0;
      border-bottom: 1px solid var(--line);
      position: relative;
    }

    @media (min-width: 900px) {
      .step {
        padding: 0 28px 0 0;
        border-bottom: none;
      }
      .step + .step {
        padding-left: 28px;
        border-left: 1px solid var(--line);
      }
    }

    .step .n {
      font-family: var(--display);
      font-weight: 800;
      font-size: clamp(64px, 7vw, 104px);
      line-height: 1;
      letter-spacing: -.06em;
      -webkit-text-stroke: 1.2px var(--line);
      color: transparent;
      transition: color .4s, -webkit-text-stroke-color .4s;
    }

    .step:nth-child(3) .n {
      color: var(--violet);
      -webkit-text-stroke-color: var(--violet);
    }

    .step:hover .n {
      color: var(--violet);
      -webkit-text-stroke-color: var(--violet);
    }

    .step h3 {
      font-size: 24px;
      font-weight: 700;
      letter-spacing: -.02em;
      margin-top: 20px;
    }

    .step .wk-span {
      font-family: var(--serif);
      font-style: italic;
      color: var(--violet-hi);
      font-size: 15px;
    }

    .step p {
      color: var(--mute);
      margin: 10px 0 0;
      font-size: 15px;
    }

    @media (max-width: 899px) {
      .process-planet {
        width: 520px;
        opacity: .25;
      }
      .process-planet-left {
        left: -360px;
        top: -145px;
        transform: rotate(34deg);
      }
      .proc-title .proc-line:first-child {
        white-space: normal;
      }
      .proc-title .proc-line:last-child {
        white-space: nowrap;
      }
    }

    /* moving platform wall */
    .brand-wall {
      overflow: hidden;
      padding: 100px 0 0;
      background: var(--ink);
      color: var(--paper);
    }

    .brand-wall-inner {
      display: grid;
      gap: 10px;
      overflow: hidden;
      mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
      -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
    }

    .brand-row {
      overflow: hidden;
    }

    .brand-track {
      display: flex;
      width: max-content;
      will-change: transform;
      animation: brand-marquee-left 30s linear infinite;
    }

    .brand-row:nth-child(2) .brand-track {
      animation-name: brand-marquee-right;
      animation-duration: 34s;
    }

    .brand-row:hover .brand-track {
      animation-play-state: paused;
    }

    .brand-group {
      display: flex;
      gap: 10px;
      padding-right: 10px;
    }

    .brand-logo-card {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      width: clamp(180px, 15vw, 235px);
      height: 96px;
      border: 1px solid rgba(222, 222, 226, .13);
      border-radius: 12px;
      background: rgba(18, 17, 22, .72);
      color: #f4f2f7;
      font-family: var(--display);
      font-size: clamp(16px, 1.4vw, 22px);
      font-weight: 600;
      filter: grayscale(1);
      transition: filter .3s, border-color .3s, background .3s, transform .3s;
    }

    .brand-logo-card:hover {
      filter: grayscale(0);
      border-color: color-mix(in srgb, var(--brand, #8b5cf6) 58%, transparent);
      background: rgba(28, 25, 34, .94);
      transform: translateY(-2px);
    }

    .brand-symbol {
      display: grid;
      place-items: center;
      min-width: 34px;
      font-size: 32px;
      font-weight: 800;
      line-height: 1;
      color: var(--brand, #fff);
      transition: color .3s, background .3s;
    }

    .brand-name {
      transition: color .3s;
    }

    .brand-logo-card:hover .brand-name {
      color: var(--brand, #fff);
    }

    .brand-google {
      --brand: #4285f4;
    }

    .brand-google:hover .brand-symbol,
    .brand-google:hover .brand-name {
      background: linear-gradient(90deg, #4285f4 0 28%, #ea4335 28% 48%, #fbbc05 48% 68%, #34a853 68%);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }

    .brand-microsoft {
      --brand: #00a4ef;
    }

    .brand-microsoft .brand-symbol {
      grid-template-columns: repeat(2, 8px);
      grid-template-rows: repeat(2, 8px);
      gap: 2px;
    }

    .brand-microsoft .brand-symbol i {
      display: block;
      width: 8px;
      height: 8px;
      background: currentColor;
    }

    .brand-microsoft:hover .brand-symbol i:nth-child(1) {
      background: #f25022;
    }

    .brand-microsoft:hover .brand-symbol i:nth-child(2) {
      background: #7fba00;
    }

    .brand-microsoft:hover .brand-symbol i:nth-child(3) {
      background: #00a4ef;
    }

    .brand-microsoft:hover .brand-symbol i:nth-child(4) {
      background: #ffb900;
    }

    .brand-meta {
      --brand: #0866ff;
    }

    .brand-instagram {
      --brand: #e1306c;
    }

    .brand-instagram:hover .brand-symbol {
      background: linear-gradient(145deg, #833ab4, #fd1d1d, #fcb045);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }

    .brand-linkedin {
      --brand: #0a66c2;
    }

    .brand-wordpress {
      --brand: #21759b;
    }

    .brand-shopify {
      --brand: #95bf47;
    }

    .brand-adobe {
      --brand: #ff0000;
    }

    .brand-figma {
      --brand: #f24e1e;
    }

    .brand-slack {
      --brand: #36c5f0;
    }

    .brand-spotify {
      --brand: #1db954;
    }

    .brand-youtube {
      --brand: #ff0033;
    }

    .brand-googleads {
      --brand: #fbbc04;
    }

    .brand-figma:hover .brand-symbol {
      background: linear-gradient(180deg, #f24e1e 0 20%, #ff7262 20% 40%, #a259ff 40% 60%, #1abcfe 60% 80%, #0acf83 80%);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }

    .brand-slack:hover .brand-symbol {
      background: conic-gradient(#36c5f0, #2eb67d, #ecb22e, #e01e5a, #36c5f0);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }

    .brand-amazon {
      --brand: #ff9900;
    }

    .brand-notion {
      --brand: #f4f2f7;
    }

    @keyframes brand-marquee-left {
      from {
        transform: translateX(0);
      }
      to {
        transform: translateX(-50%);
      }
    }

    @keyframes brand-marquee-right {
      from {
        transform: translateX(-50%);
      }
      to {
        transform: translateX(0);
      }
    }

    @media (max-width: 620px) {
      .brand-wall {
        padding-top: 80px;
      }
      .brand-logo-card {
        width: 170px;
        height: 82px;
        font-size: 16px;
      }
      .brand-symbol {
        font-size: 27px;
      }
    }

    /* Retrix brand orbit */
    .brand-orbit-section {
      overflow: hidden;
      padding: 100px 0 0;
      background: var(--ink);
      color: var(--paper);
    }

    .brand-orbit {
      position: relative;
      isolation: isolate;
      min-height: 460px;
      max-width: 1540px;
      margin: 0 auto;
    }

    .brand-orbit::before,
    .brand-orbit::after {
      content: "";
      position: absolute;
      z-index: -2;
      left: 50%;
      top: 51%;
      border: 1px dashed rgba(164, 137, 230, .2);
      border-radius: 50%;
      transform: translate(-50%, -50%);
      pointer-events: none;
    }

    .brand-orbit::before {
      width: min(1180px, 92vw);
      height: 210px;
      animation: orbit-line-drift 12s ease-in-out infinite alternate;
    }

    .brand-orbit::after {
      width: min(1500px, 112vw);
      height: 340px;
      opacity: .6;
      animation: orbit-line-drift 15s ease-in-out -4s infinite alternate-reverse;
    }

    .orbit-core {
      position: absolute;
      z-index: 4;
      left: 50%;
      top: 51%;
      display: grid;
      place-items: center;
      width: 136px;
      height: 136px;
      border: 1px solid rgba(172, 145, 255, .38);
      border-radius: 50%;
      background: radial-gradient(circle at 35% 27%, #292737, #111018 62%, #09090d);
      box-shadow: 0 0 0 14px rgba(107, 60, 214, .08), 0 0 65px rgba(111, 62, 230, .34), inset 0 1px 0 rgba(255, 255, 255, .12);
      transform: translate(-50%, -50%);
      animation: orbit-core-glow 4.6s ease-in-out infinite;
    }

    .orbit-core strong {
      font-family: var(--display);
      font-size: 27px;
      letter-spacing: -.045em;
    }

    .orbit-wave {
      position: absolute;
      z-index: -1;
      inset: -1px;
      border: 1px solid rgba(139, 92, 246, .5);
      border-radius: 50%;
      animation: orbit-wave 3.6s ease-out infinite;
    }

    .orbit-wave:nth-child(2) {
      animation-delay: 1.2s;
    }

    .orbit-wave:nth-child(3) {
      animation-delay: 2.4s;
    }

    .orbit-brand {
      --badge-scale: 1;
      position: absolute;
      z-index: 2;
      left: clamp(72px, var(--x), calc(100% - 72px));
      top: var(--y);
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 9px;
      min-width: 126px;
      padding: 10px 15px;
      border: 1px solid rgba(225, 218, 237, .15);
      border-radius: 999px;
      background: rgba(24, 22, 29, .86);
      box-shadow: 0 12px 34px rgba(0, 0, 0, .22), inset 0 1px 0 rgba(255, 255, 255, .04);
      color: #f4f2f7;
      font-family: var(--display);
      font-size: 13px;
      font-weight: 600;
      white-space: nowrap;
      opacity: 0;
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      animation: orbit-badge-fade 8s ease-in-out var(--delay) infinite;
      will-change: transform, opacity;
    }

    .orbit-brand .brand-symbol {
      min-width: 24px;
      font-size: 22px;
      color: var(--brand, #8b5cf6);
    }

    .orbit-brand:hover {
      z-index: 6;
      border-color: color-mix(in srgb, var(--brand, #8b5cf6) 60%, transparent);
      animation-play-state: paused;
    }

    .orbit-brand.brand-google .brand-symbol {
      background: linear-gradient(90deg, #4285f4 0 28%, #ea4335 28% 48%, #fbbc05 48% 68%, #34a853 68%);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }

    .orbit-brand.brand-instagram .brand-symbol {
      background: linear-gradient(145deg, #833ab4, #fd1d1d, #fcb045);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }

    .orbit-brand.brand-figma .brand-symbol {
      background: linear-gradient(180deg, #f24e1e 0 20%, #ff7262 20% 40%, #a259ff 40% 60%, #1abcfe 60% 80%, #0acf83 80%);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }

    .orbit-brand.brand-slack .brand-symbol {
      background: conic-gradient(#36c5f0, #2eb67d, #ecb22e, #e01e5a, #36c5f0);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }

    @keyframes orbit-wave {
      0% {
        opacity: .7;
        transform: scale(.92);
      }
      100% {
        opacity: 0;
        transform: scale(2.25);
      }
    }

    @keyframes orbit-core-glow {
      50% {
        box-shadow: 0 0 0 20px rgba(107, 60, 214, .04), 0 0 88px rgba(111, 62, 230, .48), inset 0 1px 0 rgba(255, 255, 255, .14);
      }
    }

    @keyframes orbit-line-drift {
      to {
        transform: translate(-50%, -50%) rotate(2deg) scale(1.02);
      }
    }

    @keyframes orbit-badge-fade {
      0%, 100% {
        opacity: .12;
        transform: translate(-50%, -44%) scale(var(--badge-scale));
      }
      18%, 70% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(var(--badge-scale));
      }
      84% {
        opacity: .3;
        transform: translate(-50%, -52%) scale(var(--badge-scale));
      }
    }

    @media (max-width: 620px) {
      .brand-orbit-section {
        padding-top: 80px;
      }
      .brand-orbit {
        min-height: 640px;
      }
      .brand-orbit::before {
        width: 540px;
        height: 270px;
      }
      .brand-orbit::after {
        width: 710px;
        height: 430px;
      }
      .orbit-core {
        top: 50%;
        width: 108px;
        height: 108px;
      }
      .orbit-core strong {
        font-size: 22px;
      }
      .orbit-brand {
        --badge-scale: .86;
        left: var(--mx);
        top: var(--my);
        min-width: 112px;
        padding: 8px 10px;
        font-size: 11px;
      }
      .orbit-brand .brand-symbol {
        min-width: 19px;
        font-size: 18px;
      }
    }

    /* Platform mosaic: unified replacement for the marquee and orbit sections */
    .brand-mosaic-section {
      padding: 150px 0 clamp(70px, 7vw, 100px);
      overflow: hidden;
      background: var(--ink);
      color: var(--paper);
    }

    .brand-mosaic-section .wrap {
      max-width: 1540px;
    }

    .brand-mosaic {
      --mosaic-cols: 7;
      --mosaic-rows: 3;
      --grid-extension: 100px;
      position: relative;
      isolation: isolate;
      display: grid;
      grid-template-columns: repeat(7, minmax(0, 1fr));
      width: 100%;
      margin: 0;
      border-top: 1px solid rgba(255, 255, 255, .14);
      border-left: 1px solid rgba(255, 255, 255, .14);
      background: var(--ink);
      box-shadow: none;
    }

    /* Continue the actual column lines above and below the cards. */
    .brand-mosaic::before {
      content: "";
      position: absolute;
      z-index: 0;
      top: calc(-1 * var(--grid-extension));
      bottom: calc(-1 * var(--grid-extension));
      left: 0;
      right: 0;
      pointer-events: none;
      background-image: linear-gradient(to right, rgba(255, 255, 255, .12) 0 1px, transparent 1px);
      background-size: calc(100% / var(--mosaic-cols)) 100%;
      border-right: 1px solid rgba(255, 255, 255, .12);
      -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 var(--grid-extension), #000 calc(100% - var(--grid-extension)), transparent 100%);
      mask-image: linear-gradient(to bottom, transparent 0, #000 var(--grid-extension), #000 calc(100% - var(--grid-extension)), transparent 100%);
    }

    .mosaic-brand {
      --brand-rgb: 139, 92, 246;
      position: relative;
      z-index: 1;
      isolation: isolate;
      display: grid;
      place-items: center;
      align-content: center;
      gap: clamp(8px, .9vw, 14px);
      min-width: 0;
      aspect-ratio: 1.28 / 1;
      padding: clamp(14px, 1.6vw, 24px) 8px;
      overflow: visible;
      border: 0;
      border-right: 1px solid rgba(255, 255, 255, .14);
      border-bottom: 1px solid rgba(255, 255, 255, .14);
      background: var(--ink);
      color: #aaa8b0;
      text-align: center;
      opacity: 1;
      animation: none;
      box-shadow: inset 0 0 0 1px transparent;
      transition: box-shadow .35s ease;
    }

    .mosaic-brand::before {
      content: "";
      position: absolute;
      z-index: 3;
      top: -1px;
      bottom: -1px;
      left: -90px;
      right: -90px;
      pointer-events: none;
      background:
        linear-gradient(to right, transparent 0, rgba(var(--brand-rgb), .08) 18px, rgba(var(--brand-rgb), .82) 90px, rgba(var(--brand-rgb), .82) calc(100% - 90px), rgba(var(--brand-rgb), .08) calc(100% - 18px), transparent 100%) top / 100% 1px no-repeat,
        linear-gradient(to right, transparent 0, rgba(var(--brand-rgb), .08) 18px, rgba(var(--brand-rgb), .82) 90px, rgba(var(--brand-rgb), .82) calc(100% - 90px), rgba(var(--brand-rgb), .08) calc(100% - 18px), transparent 100%) bottom / 100% 1px no-repeat;
      opacity: 0;
      transition: opacity .35s ease;
    }

    .mosaic-brand::after {
      content: "";
      position: absolute;
      z-index: 3;
      top: -90px;
      bottom: -90px;
      left: -1px;
      right: -1px;
      pointer-events: none;
      background:
        linear-gradient(to bottom, transparent 0, rgba(var(--brand-rgb), .08) 18px, rgba(var(--brand-rgb), .82) 90px, rgba(var(--brand-rgb), .82) calc(100% - 90px), rgba(var(--brand-rgb), .08) calc(100% - 18px), transparent 100%) left / 1px 100% no-repeat,
        linear-gradient(to bottom, transparent 0, rgba(var(--brand-rgb), .08) 18px, rgba(var(--brand-rgb), .82) 90px, rgba(var(--brand-rgb), .82) calc(100% - 90px), rgba(var(--brand-rgb), .08) calc(100% - 18px), transparent 100%) right / 1px 100% no-repeat;
      opacity: 0;
      transition: opacity .35s ease;
    }

    .mosaic-brand:hover,
    .mosaic-brand:focus-visible {
      z-index: 2;
      opacity: 1;
      outline: none;
      box-shadow: inset 0 0 0 1px rgba(var(--brand-rgb), .82);
    }

    .mosaic-brand:hover::before,
    .mosaic-brand:hover::after,
    .mosaic-brand:focus-visible::before,
    .mosaic-brand:focus-visible::after {
      opacity: 1;
    }

    .mosaic-icon {
      display: block;
      width: clamp(38px, 4vw, 64px);
      height: clamp(38px, 4vw, 64px);
      object-fit: contain;
      filter: grayscale(1) saturate(0) brightness(1.2);
      opacity: .72;
      transform: scale(1);
      transition: filter .35s ease, opacity .35s ease, transform .35s ease;
    }

    .mosaic-brand:hover .mosaic-icon,
    .mosaic-brand:focus-visible .mosaic-icon {
      filter: none;
      opacity: 1;
      transform: scale(1.12);
    }

    .mosaic-name {
      max-width: 100%;
      overflow: hidden;
      font-family: var(--display);
      font-size: clamp(11px, 1vw, 16px);
      font-weight: 600;
      letter-spacing: -.04em;
      line-height: 1.1;
      text-overflow: ellipsis;
      white-space: nowrap;
      opacity: 1;
      transition: none;
    }

    .mosaic-brand--retrix {
      opacity: 1;
      animation: none;
      background: radial-gradient(circle at 82% 17%, rgba(180, 155, 255, .34), transparent 38%), linear-gradient(145deg, #351079, #130829 68%, #08070d);
      box-shadow: inset 0 0 0 1px rgba(139, 92, 246, .9), 0 0 52px rgba(91, 33, 182, .34);
    }

    .mosaic-brand--retrix::before {
      opacity: 1;
      background: linear-gradient(155deg, transparent 48%, rgba(139, 92, 246, .62) 49%, rgba(180, 155, 255, .92) 50%, transparent 51%);
    }

    .mosaic-brand--retrix::after {
      border-color: rgba(180, 155, 255, .68);
      box-shadow: 0 0 30px rgba(139, 92, 246, .28);
    }

    .retrix-mark {
      display: grid;
      place-items: center;
      width: clamp(68px, 7vw, 112px);
      height: clamp(56px, 6vw, 92px);
      color: #f4edff;
      font-family: var(--display);
      font-size: clamp(48px, 5.4vw, 84px);
      font-weight: 800;
      font-style: italic;
      letter-spacing: -.17em;
      line-height: 1;
      text-shadow: -12px 10px 0 #6d28d9, 0 0 28px rgba(180, 155, 255, .55);
      transform: skewX(-8deg);
    }

    .mosaic-brand--retrix .mosaic-name {
      font-size: clamp(20px, 2.4vw, 38px);
      font-weight: 700;
    }

    @keyframes mosaic-logo-fade {
      0%, 100% { opacity: .28; }
      16%, 58% { opacity: .76; }
      76% { opacity: .42; }
    }

    @media (max-width: 980px) {
      .brand-mosaic {
        --mosaic-cols: 4;
        --mosaic-rows: 6;
        grid-template-columns: repeat(4, minmax(0, 1fr));
      }
      .mosaic-brand { aspect-ratio: 1.2 / 1; }
    }

    @media (max-width: 620px) {
      .brand-mosaic {
        --mosaic-cols: 3;
        --mosaic-rows: 7;
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }
      .mosaic-brand { aspect-ratio: 1 / 1; padding: 13px 6px; }
      .mosaic-icon { width: clamp(38px, 12vw, 54px); height: clamp(38px, 12vw, 54px); }
      .mosaic-name { font-size: clamp(10px, 2.9vw, 14px); }
    }

    @media (max-width: 390px) {
      .mosaic-brand { gap: 9px; padding-inline: 4px; }
      .mosaic-name { font-size: 10px; }
    }

    /* testimonials */
    .testimonials-section {
      position: relative;
      isolation: isolate;
      overflow: hidden;
      padding: 100px 0 0;
      background: var(--ink);
      color: var(--paper);
    }

    .testimonials-section::before {
      content: "";
      position: absolute;
      left: 50%;
      top: 50%;
      width: 70vw;
      height: 70vw;
      max-width: 1000px;
      max-height: 1000px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(109, 40, 232, .09), transparent 67%);
      transform: translate(-50%, -50%);
      pointer-events: none;
    }

    .testimonials-section .wrap {
      position: relative;
      z-index: 1;
      max-width: 1540px;
    }

    .testimonial-head {
      margin-bottom: clamp(52px, 6vw, 84px);
    }

    .testimonial-badge {
      display: inline-flex;
      align-items: center;
      padding: 8px 17px;
      border-radius: 999px;
      background: #f2edff;
      color: #6422e8;
      font-family: var(--display);
      font-size: 11px;
      font-weight: 700;
      letter-spacing: .04em;
      text-transform: uppercase;
    }

    .testimonial-head-grid {
      display: grid;
      grid-template-columns: minmax(0, 7fr) minmax(320px, 5fr);
      align-items: end;
      gap: clamp(44px, 6vw, 90px);
      margin-top: 28px;
    }

    .testimonial-head h2 {
      font-size: clamp(48px, 4vw, 64px);
      font-weight: 700;
      line-height: .91;
      letter-spacing: -.06em;
    }

    .testimonial-head h2 > span {
      display: block;
      white-space: nowrap;
    }

    .testimonial-head h2 .it {
      color: var(--violet-hi);
      font-size: 1.05em;
    }

    .testimonial-head-copy {
      max-width: 39ch;
      margin: 0;
      padding: 8px 0 8px 40px;
      border-left: 1px solid #393640;
      color: #bbb6c2;
      font-size: 16px;
      line-height: 1.55;
    }

    .testimonial-grid {
      display: grid;
      grid-template-columns: repeat(var(--testimonial-cols, 4), minmax(0, 1fr));
      gap: 14px;
      height: 654px;
      overflow: hidden;
    }

    .testimonial-column {
      min-width: 0;
      overflow: hidden;
    }

    .testimonial-track {
      display: flex;
      flex-direction: column;
      gap: 14px;
      will-change: transform;
      animation: testimonial-marquee-up var(--testimonial-duration, 22s) linear infinite;
    }

    .testimonial-column:nth-child(even) .testimonial-track {
      animation-name: testimonial-marquee-down;
    }

    .testimonial-column:hover .testimonial-track {
      animation-play-state: paused;
    }

    .testimonial-group {
      display: flex;
      flex-direction: column;
      gap: 14px;
    }

    @keyframes testimonial-marquee-up {
      from {
        transform: translateY(0);
      }
      to {
        transform: translateY(calc(-50% - 7px));
      }
    }

    @keyframes testimonial-marquee-down {
      from {
        transform: translateY(calc(-50% - 7px));
      }
      to {
        transform: translateY(0);
      }
    }

    .testimonial-card {
      display: flex;
      min-width: 0;
      min-height: 320px;
      flex-direction: column;
      padding: 25px 24px 22px;
      border: 1px solid rgb(222 222 226 / 8%);
      border-radius: 16px;
      background: transparent;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
      will-change: transform;
    }

    .testimonial-card:hover {
      border-color: rgba(226, 216, 255, .3);
      background: transparent;
    }

    .testimonial-quote-mark {
      height: 47px;
      color: #fff;
      font-family: Georgia, serif;
      font-size: 84px;
      font-weight: 700;
      line-height: .72;
    }

    .testimonial-stars {
      margin-top: 13px;
      color: #ffd21c;
      font-size: 18px;
      line-height: 1;
      letter-spacing: .12em;
    }

    .testimonial-card blockquote {
      flex: 1;
      margin: 16px 0 22px;
      color: #f2eff5;
      font-size: 15px;
      line-height: 1.55;
      letter-spacing: -.01em;
    }

    .testimonial-person {
      display: grid;
      grid-template-columns: 50px minmax(0, 1fr) 48px;
      align-items: center;
      gap: 12px;
    }

    .testimonial-avatar {
      display: block;
      flex: 0 0 50px;
      width: 50px;
      height: 50px;
      overflow: hidden;
      border: 2px solid #a77cff;
      border-radius: 50%;
      background-color: #211735;
      background-image: url('../images/testimonial-faces.webp');
      background-repeat: no-repeat;
      background-size: 400% 200%;
      background-position: var(--face-x, 0%) var(--face-y, 0%);
      background-clip: padding-box;
      box-shadow: 0 0 0 1px rgba(255, 255, 255, .16);
    }

    .testimonial-person-copy {
      min-width: 0;
      line-height: 1.25;
    }

    .testimonial-person-copy strong,
    .testimonial-person-copy small {
      display: block;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .testimonial-person-copy strong {
      font-family: var(--display);
      font-size: 14px;
    }

    .testimonial-person-copy small {
      margin-top: 5px;
      color: #aaa5b1;
      font-size: 11px;
    }

    .testimonial-arrow {
      display: grid;
      place-items: center;
      width: 46px;
      height: 46px;
      border: 1px solid rgba(174, 130, 255, .16);
      border-radius: 50%;
      background: rgba(109, 40, 232, .22);
      color: #fff;
      font-size: 20px;
      transition: background .3s, transform .3s;
    }

    .testimonial-card:hover .testimonial-arrow {
      background: var(--violet-deep);
      transform: translateX(3px);
    }

    @media (max-width: 1120px) {
      .testimonial-head-grid {
        grid-template-columns: 1fr;
      }
      .testimonial-head-copy {
        max-width: 680px;
        padding: 0;
        border-left: 0;
      }
      .testimonial-grid {
        height: 628px;
        gap: 16px;
      }
      .testimonial-card {
        min-height: 300px;
      }
    }

    @media (max-width: 620px) {
      .testimonials-section {
        padding: 100px 0 0;
      }
      .testimonial-head {
        margin-bottom: 44px;
      }
      .testimonial-head h2 {
        font-size: clamp(36px, 9.5vw, 46px);
      }
      .testimonial-head h2 > span {
        white-space: nowrap;
      }
      .testimonial-head-grid {
        gap: 24px;
      }
      .testimonial-head-copy {
        font-size: 16px;
      }
      .testimonial-grid {
        height: 600px;
        padding-inline: 2px;
      }
      .testimonial-card {
        min-height: 288px;
        padding: 24px 20px;
      }
      .testimonial-card blockquote {
        font-size: 15px;
      }
      .testimonial-person {
        grid-template-columns: 48px minmax(0, 1fr) 44px;
      }
      .testimonial-avatar {
        flex-basis: 48px;
        width: 48px;
        height: 48px;
      }
      .testimonial-arrow {
        width: 44px;
        height: 44px;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .brand-wall-inner {
        mask-image: none;
        -webkit-mask-image: none;
      }
      .brand-row {
        overflow-x: auto;
      }
      .brand-track {
        animation: none;
      }
      .brand-group[aria-hidden="true"] {
        display: none;
      }
      .brand-orbit::before,
      .brand-orbit::after,
      .orbit-core,
      .orbit-wave,
      .orbit-brand {
        animation: none !important;
      }
      .orbit-brand {
        opacity: 1;
      }
      .testimonial-grid {
        height: auto;
        overflow: visible;
      }
      .testimonial-column {
        overflow: visible;
      }
      .testimonial-group[aria-hidden="true"] {
        display: none;
      }
    }

    /* contact */
    .cta {
      min-height: 780px;
      padding-top: 150px;
      padding-bottom: 100px;
      text-align: left;
      overflow: hidden;
      isolation: isolate;
      background: var(--ink);
    }

    .cta .wrap {
      position: relative;
      z-index: 2;
      max-width: 1500px;
    }

    .contact-shell {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: clamp(44px, 5vw, 72px);
      align-items: start;
    }

    .contact-heading {
      position: relative;
      z-index: 3;
      width: 100%;
      margin-bottom: clamp(58px, 6vw, 90px);
    }

    .contact-intro {
      position: relative;
      z-index: 3;
    }

    .contact-badge {
      margin: 0 0 28px;
    }

    .contact-planet {
      z-index: 0;
      top: auto;
      right: -15%;
      bottom: -30%;
      width: clamp(660px, 57vw, 980px);
      transform: rotate(-15deg);
      opacity: .64;
      filter: saturate(1.22) contrast(1.08);
    }

    .cta .glow {
      z-index: 0;
      width: 760px;
      height: 760px;
      left: auto;
      right: -14%;
      bottom: -390px;
      transform: none;
      opacity: .3;
    }

    .cta h2 {
      width: 100%;
      margin: 0;
      font-size: clamp(54px, 7.7vw, 126px);
      line-height: .86;
      letter-spacing: -.065em;
      font-weight: 800;
      text-transform: uppercase;
      position: relative;
    }

    .cta h2 .it {
      display: inline-block;
      color: var(--violet-hi);
      font-size: 1.09em;
      line-height: .78;
      letter-spacing: -.055em;
      text-transform: none;
    }

    .contact-title-line {
      display: block;
      white-space: nowrap;
    }

    .contact-title-line + .contact-title-line {
      margin-top: -.025em;
    }

    .cta-info {
      margin-top: 0;
    }

    .cta-info > p {
      max-width: 43ch;
      margin: 0 0 38px;
      color: #cbc7d1;
      font-size: clamp(16px, 1.3vw, 20px);
      line-height: 1.72;
    }

    .cta-info dl {
      display: grid;
      gap: 22px;
      margin: 0;
    }

    .cta-info dl > div {
      position: relative;
      display: grid;
      grid-template-columns: 72px minmax(0, 1fr);
      grid-template-areas: "icon title" "icon value";
      align-items: center;
      column-gap: 18px;
      min-height: 72px;
    }

    .contact-icon {
      grid-area: icon;
      display: grid;
      place-items: center;
      width: 68px;
      height: 68px;
      border: 1px solid #7936ef;
      border-radius: 50%;
      color: #8b5cf6;
    }

    .contact-icon svg {
      width: 29px;
      height: 29px;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.8;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .cta-info dt {
      grid-area: title;
      align-self: end;
      color: #fff;
      font-family: var(--display);
      font-size: 16px;
      font-weight: 700;
      letter-spacing: 0;
      text-transform: none;
    }

    .cta-info dd {
      grid-area: value;
      align-self: start;
      margin: 1px 0 0;
      max-width: 31ch;
      color: #c7c3cc;
      font-size: 16px;
      line-height: 1.55;
    }

    .cta form {
      position: relative;
      z-index: 3;
      display: grid;
      gap: 30px;
      padding-top: 0;
    }

    .cta .f2 {
      display: grid;
      gap: 30px;
    }

    .cta label {
      display: grid;
      gap: 13px;
      color: #f4f1f7;
      font-family: var(--display);
      font-size: 15px;
      letter-spacing: 0;
    }

    .cta input,
    .cta textarea,
    .cta select {
      width: 100%;
      padding: 12px 0;
      color: var(--paper);
      border: 0;
      border-bottom: 1px solid #c33ff0;
      border-radius: 0;
      background: transparent;
      font: inherit;
      font-family: var(--body);
      font-size: 17px;
      transition: border-color .3s, box-shadow .3s;
    }

    .cta input:focus,
    .cta textarea:focus {
      outline: none;
      border-color: #a875ff;
      box-shadow: 0 1px 0 #a875ff;
    }

    .cta textarea {
      min-height: 78px;
      resize: vertical;
    }

    .cta fieldset {
      position: relative;
      z-index: 2;
    }

    .cta fieldset legend {
      color: #f4f1f7 !important;
      font-size: 15px !important;
      letter-spacing: 0 !important;
    }

    .chips {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
    }

    .chips input {
      position: absolute;
      width: 1px;
      height: 1px;
      opacity: 0;
    }

    .chips label {
      display: inline-flex;
      justify-content: center;
      padding: 10px 20px;
      border: 1px solid #504c58;
      border-radius: 999px;
      color: #f5f3f7;
      background: rgba(8, 8, 10, .34);
      font-size: 14px;
      letter-spacing: 0;
      cursor: pointer;
      transition: background .25s, border-color .25s, transform .25s;
    }

    .chips label:hover {
      border-color: #8b5cf6;
      background: rgba(109, 40, 232, .14);
      transform: translateY(-1px);
    }

    .chips input:checked + label {
      border-color: #8b5cf6;
      background: #6d28e8;
      color: #fff;
    }

    .chips input:focus-visible + label {
      outline: 2px solid var(--violet-hi);
      outline-offset: 3px;
    }

    .cta form .pill {
      min-width: 198px;
      justify-content: center;
      padding: 14px 26px;
      background: linear-gradient(110deg, #5420ea, #8656ff);
      border-color: #855aff;
      box-shadow: 0 12px 30px rgba(103, 53, 238, .35);
    }

    .cta form .pill:hover {
      background: linear-gradient(110deg, #6d28e8, #9b78ff);
      border-color: #a88aff;
      color: #fff;
    }

    @media (min-width: 640px) {
      .cta .f2 {
        grid-template-columns: 1fr 1fr;
      }
    }

    @media (max-width: 1099px) {
      .cta {
        min-height: 0;
      }
      .contact-shell {
        grid-template-columns: 1fr;
        gap: 36px;
      }
      .cta form {
        padding-top: 0;
      }
      .contact-planet {
        right: -390px;
        bottom: -110px;
        width: 800px;
        transform: rotate(-22deg);
        opacity: .3;
      }
      .cta .glow {
        right: -45%;
        bottom: -430px;
      }
      .cta-info > p {
        max-width: 52ch;
      }
    }

    @media (max-width: 560px) {
      .cta h2 {
        font-size: clamp(40px, 11.5vw, 58px);
      }
      .cta-info dl > div {
        grid-template-columns: 58px minmax(0, 1fr);
        min-height: 58px;
        column-gap: 14px;
      }
      .contact-icon {
        width: 56px;
        height: 56px;
      }
      .contact-icon svg {
        width: 25px;
        height: 25px;
      }
      .cta .f2 {
        gap: 24px;
      }
      .chips label {
        flex: 1 1 calc(50% - 10px);
        padding-inline: 12px;
        text-align: center;
      }
      .contact-planet {
        right: -430px;
        bottom: -70px;
      }
    }

    @media (max-width: 370px) {
      .cta h2 {
        font-size: 38px;
      }
    }

    .sent {
      color: var(--violet-hi);
      font-family: var(--display);
      font-weight: 600;
    }

    /* Editorial footer */
    .site-footer {
      position: relative;
      overflow: hidden;
      color: #f7f4fb;
      border-top: 1px solid rgba(255, 255, 255, .08);
      background: var(--ink);
      font-size: 14px;
    }

    .site-footer::before {
      content: "";
      position: absolute;
      z-index: 0;
      inset: 0;
      background-image: url("../images/footer/indian-landmarks-waterfront.webp");
      background-repeat: no-repeat;
      background-position: center bottom;
      background-size: 100% auto;
      -webkit-mask-image: linear-gradient(to bottom, transparent 0%, transparent 34%, rgba(0, 0, 0, .45) 52%, #000 68%, #000 100%);
      mask-image: linear-gradient(to bottom, transparent 0%, transparent 34%, rgba(0, 0, 0, .45) 52%, #000 68%, #000 100%);
      pointer-events: none;
    }

    .site-footer .wrap {
      position: relative;
      z-index: 2;
      width: 100%;
      max-width: 1540px;
      margin-inline: auto;
    }

    .footer-top {
      display: grid;
      grid-template-columns: minmax(500px, 1.15fr) minmax(420px, 1fr) minmax(320px, .55fr);
      align-items: end;
      gap: clamp(26px, 3.5vw, 58px);
      padding-block: 74px 48px;
    }

    .footer-badge {
      border: 0;
      background: #f2edff;
      color: #6422e8;
    }

    .footer-pitch h2 {
      width: 100%;
      max-width: 500px;
      margin: 28px 0 0;
      color: #f8f5fb;
      font-family: var(--display);
      font-size: clamp(46px, 3.5vw, 56px);
      font-weight: 700;
      line-height: .94;
      letter-spacing: -.06em;
    }

    .footer-title-line {
      display: block;
      white-space: nowrap;
    }

    .footer-pitch h2 .it {
      color: #a879ff;
      font-size: 1.08em;
    }

    .footer-title-dot {
      color: #8b5cf6;
    }

    .footer-pitch > p:last-child {
      max-width: 34ch;
      margin: 30px 0 0;
      color: #aaa6b2;
      font-size: 18px;
      line-height: 1.55;
    }

    .footer-newsletter {
      align-self: end;
    }

    .footer-subscribe {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr) auto;
      align-items: center;
      min-height: 62px;
      overflow: hidden;
      border: 1px solid rgba(255, 255, 255, .43);
      border-radius: 4px;
      background: rgba(255, 255, 255, .018);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, .03);
    }

    .footer-subscribe > svg {
      width: 24px;
      height: 24px;
      margin-left: 24px;
      fill: none;
      stroke: #f3eff7;
      stroke-width: 1.7;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .footer-subscribe input {
      min-width: 0;
      height: 60px;
      padding: 0 20px;
      border: 0;
      outline: 0;
      color: #fff;
      background: transparent;
      font: 600 12px/1 var(--display);
      letter-spacing: .035em;
      text-transform: uppercase;
    }

    .footer-subscribe input::placeholder {
      color: #c6c1ca;
      opacity: 1;
    }

    .footer-subscribe:focus-within {
      border-color: #a957ff;
      box-shadow: 0 0 0 2px rgba(169, 87, 255, .14);
    }

    .footer-subscribe button {
      align-self: stretch;
      min-width: 178px;
      padding-inline: 24px;
      border: 0;
      color: #0a070e;
      background: linear-gradient(105deg, #b956ff, #7b12ef);
      font: 750 14px/1 var(--display);
      letter-spacing: .075em;
      text-transform: uppercase;
      cursor: pointer;
      transition: color .25s, filter .25s, transform .25s;
    }

    .footer-subscribe button span {
      display: inline-block;
      margin-left: 9px;
      font-size: 19px;
      line-height: 0;
      transition: transform .25s;
    }

    .footer-subscribe button:hover {
      color: #fff;
      filter: brightness(1.14);
    }

    .footer-subscribe button:hover span {
      transform: translateX(4px);
    }

    .footer-newsletter small {
      display: block;
      min-height: 20px;
      margin-top: 14px;
      color: #bbb6c0;
      font-size: 12px;
      line-height: 1.5;
    }

    .footer-newsletter small.is-sent {
      color: #b878ff;
    }

    .footer-social {
      padding-left: clamp(22px, 2vw, 32px);
      border-left: 1px solid rgba(255, 255, 255, .54);
    }

    .footer-social > strong,
    .footer-column > strong {
      display: block;
      color: #f7f4fb;
      font-family: var(--display);
      font-size: 12px;
      font-weight: 750;
      letter-spacing: .08em;
      text-transform: uppercase;
    }

    .footer-social-list {
      display: flex;
      gap: 8px;
      margin-top: 15px;
    }

    .footer-social-list button {
      display: grid;
      place-items: center;
      flex: 0 0 50px;
      width: 50px;
      height: 50px;
      aspect-ratio: 1;
      padding: 0;
      border: 1px solid rgba(255, 255, 255, .35);
      border-radius: 7px;
      color: #f6f2f9;
      background: rgba(255, 255, 255, .015);
      cursor: pointer;
      transition: border-color .25s, color .25s, background .25s, transform .25s;
    }

    .footer-social-list button:hover,
    .footer-social-list button:focus-visible {
      border-color: #a855f7;
      color: #c48cff;
      background: rgba(139, 92, 246, .12);
      transform: translateY(-3px);
    }

    .footer-social-list svg {
      width: 21px;
      height: 21px;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.8;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .footer-divider {
      position: relative;
      z-index: 3;
      width: 100%;
      height: 1px;
      background: rgb(255 255 255 / 30%);
    }

    .footer-links {
      position: relative;
      z-index: 3;
      display: grid;
      grid-template-columns: 1.3fr .82fr .82fr 1fr 1.08fr;
      gap: 0;
      padding-block: 38px 50px;
    }

    .footer-brand {
      padding-right: clamp(28px, 4vw, 64px);
    }

    .footer-brand .logo,
    .footer-bottom .logo {
      display: inline-block;
      color: #f8f5fb;
      font-size: clamp(25px, 2.3vw, 38px);
      line-height: 1;
    }

    .footer-brand > p {
      max-width: 29ch;
      margin: 17px 0 0;
      color: #d1cdd6;
      font-size: 15px;
      line-height: 1.62;
    }

    .footer-signature {
      display: inline-block;
      margin-top: 18px;
      color: #f1eaff;
      font-family: var(--serif);
      font-size: 30px;
      font-style: italic;
      line-height: .8;
      transform: rotate(-6deg);
    }

    .footer-signature::after {
      content: "";
      display: block;
      width: 88px;
      height: 4px;
      margin: 10px 0 0 72px;
      border-radius: 99px;
      background: linear-gradient(90deg, #6d28e8, #c52fff);
      transform: rotate(-10deg);
    }

    .footer-column {
      min-width: 0;
      padding-inline: clamp(22px, 3vw, 46px) 18px;
      border-left: 1px solid rgba(255, 255, 255, .38);
    }

    .footer-column > strong::after {
      content: "";
      display: block;
      width: 30px;
      height: 4px;
      margin-top: 12px;
      background: #a21bff;
    }

    .footer-column ul {
      display: grid;
      gap: 11px;
      margin: 18px 0 0;
      padding: 0;
      list-style: none;
    }

    .footer-column a {
      color: #d6d2db;
      text-decoration: none;
      font-size: 14px;
      line-height: 1.45;
      transition: color .2s, transform .2s;
    }

    .footer-column a:hover,
    .footer-column a:focus-visible {
      color: #bd7aff;
    }

    .footer-contact-list li {
      display: grid;
      grid-template-columns: 32px minmax(0, 1fr);
      align-items: start;
      gap: 11px;
    }

    .footer-contact-list svg {
      width: 24px;
      height: 24px;
      fill: none;
      stroke: #a924ff;
      stroke-width: 1.9;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .footer-landscape {
      position: relative;
      z-index: 1;
      height: clamp(250px, 26vw, 385px);
      margin-top: -10px;
      pointer-events: none;
    }

    .footer-wordmark-bg {
      position: absolute;
      top: -.08em;
      left: 50%;
      color: rgba(208, 209, 221, .25);
      font: 800 clamp(100px, 21vw, 430px)/1 var(--display);
      letter-spacing: -.04em;
      white-space: nowrap;
      transform: translateX(-50%) scaleX(1.25);
    }

    .footer-bottom {
      position: relative;
      z-index: 4;
      display: grid;
      grid-template-columns: auto 1fr auto;
      align-items: center;
      gap: 28px;
      min-height: 62px;
      color: #d3ced8;
      border-top: 1px solid rgba(255, 255, 255, .22);
      background: rgba(15, 14, 18, .88);
      backdrop-filter: blur(10px);
    }

    .footer-bottom .wrap {
      display: contents;
    }

    .footer-bottom > *:first-child,
    .footer-bottom .logo {
      margin-left: max(24px, calc((100vw - 1540px) / 2));
    }

    .footer-bottom .logo {
      font-size: 21px;
    }

    .footer-unit {
      justify-self: center;
      font-size: 12px;
    }

    .footer-legal {
      display: flex;
      align-items: center;
      gap: 16px;
      margin-right: max(24px, calc((100vw - 1540px) / 2));
      font-size: 11px;
    }

    .footer-legal a {
      padding-left: 16px;
      color: #d3ced8;
      border-left: 1px solid rgba(255, 255, 255, .28);
      text-decoration: none;
    }

    .footer-legal a:hover {
      color: #bd7aff;
    }

    @media (max-width: 1380px) {
      .footer-top {
        grid-template-columns: 1fr 1fr;
      }
      .footer-social {
        grid-column: 1 / -1;
        display: flex;
        align-items: center;
        gap: 22px;
        padding: 22px 0 0;
        border-top: 1px solid rgba(255, 255, 255, .16);
        border-left: 0;
      }
      .footer-social-list {
        margin-top: 0;
      }
      .footer-links {
        grid-template-columns: 1.25fr repeat(2, 1fr);
        row-gap: 34px;
      }
      .footer-brand {
        grid-row: span 2;
      }
      .footer-column:nth-child(4),
      .footer-column:nth-child(5) {
        border-top: 1px solid rgba(255, 255, 255, .12);
        padding-top: 28px;
      }
      .footer-bottom {
        grid-template-columns: auto 1fr;
        padding-block: 14px;
      }
      .footer-unit {
        justify-self: end;
        margin-right: 24px;
      }
      .footer-legal {
        grid-column: 1 / -1;
        justify-content: center;
        margin: 0;
      }
    }

    @media (max-width: 760px) {
      .site-footer .wrap {
        width: min(100% - 32px, 1540px);
      }
      .footer-top {
        grid-template-columns: 1fr;
        padding-block: 64px 38px;
      }
      .footer-pitch h2 {
        font-size: clamp(36px, 10vw, 54px);
      }
      .footer-title-line {
        white-space: normal;
      }
      .footer-social {
        grid-column: auto;
        flex-wrap: wrap;
      }
      .footer-links {
        grid-template-columns: 1fr 1fr;
      }
      .footer-brand {
        grid-column: 1 / -1;
        grid-row: auto;
        padding: 0 0 30px;
      }
      .footer-column {
        padding: 24px 12px 0 20px;
        border-top: 1px solid rgba(255, 255, 255, .12);
      }
      .footer-column:nth-child(4),
      .footer-column:nth-child(5) {
        padding-top: 24px;
      }
      .footer-landscape {
        height: 255px;
      }
      .footer-bottom {
        grid-template-columns: 1fr;
        justify-items: center;
        gap: 11px;
        padding: 20px 16px;
        text-align: center;
      }
      .footer-bottom > *:first-child,
      .footer-bottom .logo,
      .footer-unit,
      .footer-legal {
        justify-self: center;
        margin: 0;
      }
      .footer-legal {
        grid-column: auto;
        flex-wrap: wrap;
      }
    }

    @media (max-width: 520px) {
      .footer-subscribe {
        grid-template-columns: auto minmax(0, 1fr);
      }
      .footer-subscribe button {
        grid-column: 1 / -1;
        min-height: 54px;
      }
      .footer-links {
        grid-template-columns: 1fr;
      }
      .footer-column,
      .footer-column:nth-child(4),
      .footer-column:nth-child(5) {
        padding: 23px 0 0;
        border-left: 0;
      }
      .footer-social-list {
        flex-wrap: wrap;
      }
      .footer-landscape {
        height: 215px;
      }
      .footer-legal {
        gap: 10px;
      }
      .footer-legal a {
        padding-left: 10px;
      }
    }

    /* cursor */
    .cur,
    .cur-dot {
      position: fixed;
      top: 0;
      left: 0;
      pointer-events: none;
      z-index: 9999;
      display: none;
      opacity: 0;
      visibility: hidden;
      transform: translate3d(-100px, -100px, 0);
      will-change: transform;
      transition: opacity .18s ease;
    }

    .cur.is-visible,
    .cur-dot.is-visible {
      opacity: 1;
      visibility: visible;
    }

    .cur {
      width: 40px;
      height: 40px;
      margin: -20px 0 0 -20px;
      border-radius: 50%;
      mix-blend-mode: difference;
    }

    .cur::before {
      content: "";
      position: absolute;
      inset: 0;
      border: 1.5px solid var(--paper);
      border-radius: 50%;
      background-color: transparent;
      transform: scale(1);
      transition: transform .35s ease, background-color .35s ease, border-color .35s ease;
    }

    .cur-dot {
      width: 6px;
      height: 6px;
      margin: -3px 0 0 -3px;
      border-radius: 50%;
      background: var(--violet);
    }

    .cur.big::before {
      transform: scale(2.1);
      background-color: var(--paper);
      border-color: var(--paper);
    }

    @media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
      body.has-cur,
      body.has-cur a,
      body.has-cur button,
      body.has-cur label,
      body.has-cur input,
      body.has-cur textarea,
      body.has-cur select {
        cursor: none;
      }
      .cur,
      .cur-dot {
        display: block;
      }
    }

    .mag {
      will-change: transform;
      transition: transform .5s cubic-bezier(.2, .8, .2, 1);
    }

    .mag.is-magnetic-active {
      transition: none;
    }

    @media (prefers-reduced-motion: reduce) {
      html {
        scroll-behavior: auto;
      }
      *,
      *::before,
      *::after {
        animation: none !important;
        transition: none !important;
      }
      .cur,
      .cur-dot {
        display: none !important;
      }
      body.has-cur {
        cursor: auto;
      }
      .hero h1 .row > span,
      .planet,
      .trust {
        will-change: auto;
      }
    }
/* Keep the full header menu usable and visible on smaller screens. */
@media (max-width: 1199px) {
  .nav .wrap,
  .nav.is-scrolled .wrap {
    height: auto;
    min-height: 76px;
    flex-wrap: wrap;
    gap: 0 12px;
    padding-top: 12px;
    padding-bottom: 10px;
  }

  .nav > .wrap > .pill {
    margin-left: auto;
  }

  .nav nav {
    order: 3;
    flex-basis: 100%;
    width: 100%;
    margin: 0;
    overflow-x: auto;
    scrollbar-width: thin;
  }

  .nav ul {
    display: flex;
    align-items: center;
    width: max-content;
    gap: clamp(16px, 2.8vw, 32px);
    padding: 2px 0 10px;
    font-size: 12px;
  }

  .nav .nav-menu > li,
  .nav .nav-menu > li:not(.nav-careers) {
    display: flex;
    align-items: center;
    min-height: 40px;
  }

  .nav ul .nav-careers {
    order: -1;
  }

  .nav .nav-menu > li > a {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    white-space: nowrap;
    line-height: 1;
  }
}

/* Shared Services dropdown: hover, keyboard focus and compact touch navigation. */
.nav-has-dropdown {
  position: relative;
}

.nav-has-dropdown > a {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.nav-services-chevron {
  display: inline-block;
  color: var(--violet);
  font-size: 16px;
  line-height: 1;
  transition: transform .25s ease;
}

.nav .nav-dropdown {
  position: absolute;
  top: calc(100% + 20px);
  left: 50%;
  z-index: 80;
  display: grid;
  grid-template-columns: repeat(2, minmax(235px, 1fr));
  gap: 6px;
  width: 560px;
  margin: 0;
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 20px;
  background: rgba(10, 9, 14, .98);
  box-shadow: 0 24px 70px rgba(14, 8, 25, .3);
  color: #fff;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(-50%, 10px);
  transition: opacity .2s ease, transform .25s ease, visibility .2s ease;
}

.nav .nav-dropdown::before {
  content: "";
  position: absolute;
  right: 0;
  bottom: 100%;
  left: 0;
  height: 22px;
}

.nav .nav-dropdown li {
  display: block;
}

.nav .nav-dropdown a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 14px;
  border-radius: 12px;
  color: #f7f4fb;
  font-size: 13px;
  line-height: 1.35;
  text-decoration: none;
  transition: background .2s ease, color .2s ease, transform .2s ease;
}

.nav .nav-dropdown a span {
  color: #a77cff;
  font-family: var(--display);
  font-size: 10px;
  letter-spacing: .08em;
}

.nav .nav-dropdown a:hover,
.nav .nav-dropdown a:focus-visible {
  background: rgba(139, 92, 246, .16);
  color: #fff;
  transform: translateX(3px);
}

.nav-has-dropdown:hover > .nav-dropdown,
.nav-has-dropdown:focus-within > .nav-dropdown {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, 0);
}

.nav-has-dropdown:hover .nav-services-chevron,
.nav-has-dropdown:focus-within .nav-services-chevron {
  transform: rotate(180deg);
}

@media (min-width: 1200px) {
  .nav .about-menu {
    grid-template-columns: 1fr;
    width: 300px;
  }
}

@media (max-width: 1199px) {
  .nav-has-dropdown {
    display: flex !important;
    align-items: center;
    gap: 12px;
  }

  .nav-services-chevron {
    display: none;
  }

  .nav .nav-dropdown {
    position: static;
    display: flex;
    width: auto;
    min-width: max-content;
    gap: 14px;
    padding: 0 0 0 12px;
    border: 0;
    border-left: 1px solid rgba(139, 92, 246, .35);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: inherit;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
  }

  .nav .nav-dropdown a {
    gap: 5px;
    padding: 0;
    color: inherit;
    font-size: 11px;
  }

  .nav .nav-dropdown a:hover,
  .nav .nav-dropdown a:focus-visible {
    background: transparent;
    color: var(--violet-hi);
    transform: none;
  }
}