:root {
        --c-gray-blue: #323c40;
        --c-green-blue: #3cbeae;
        --c-amber-orange: #b87704;
        --c-white: #ffffff;
        --c-black: #000000;

        --bg: var(--c-gray-blue);
        --fg: #f3fbfa;
        --muted: rgba(243, 251, 250, 0.72);
        --stroke: rgba(243, 251, 250, 0.16);
        --surface: rgba(255, 255, 255, 0.06);
        --surface-2: rgba(255, 255, 255, 0.1);
        --shadow: 0 18px 55px rgba(0, 0, 0, 0.35);
        --radius: 18px;
        --radius-sm: 14px;

        --max: 1120px;
        --gutter: clamp(18px, 4vw, 46px);

        --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New",
          monospace;
        --sans: "Fira Sans", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji",
          "Segoe UI Emoji";
      }

      * {
        box-sizing: border-box;
      }

      @media (prefers-reduced-motion: no-preference) {
        html {
          scroll-behavior: smooth;
        }
      }

      body {
        margin: 0;
        color: var(--fg);
        background: var(--bg);
        font-family: var(--sans);
        line-height: 1.55;
        text-rendering: optimizeLegibility;
        cursor: default;
        user-select: text;
      }

      img {
        display: block;
        max-width: 100%;
        height: auto;
        -webkit-user-drag: none;
        user-select: none;
      }

      section[id] {
        scroll-margin-top: 88px;
      }

      html {
        scroll-padding-top: 88px;
      }

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

      a,
      button,
      .service-icon,
      .ref-media,
      [data-zoom-src],
      [data-copy],
      [data-to-top],
      a *,
      button *,
      .service-icon *,
      .ref-media *,
      [data-zoom-src] * {
        cursor: pointer;
      }

      #process button,
      #process button * {
        cursor: default;
      }

      input,
      textarea,
      input *,
      textarea * {
        cursor: text;
        user-select: text;
      }

      .honeypot {
        position: absolute;
        left: -9999px;
        width: 1px;
        height: 1px;
        opacity: 0;
        pointer-events: none;
      }

      .legal-main {
        position: relative;
        isolation: isolate;
        min-height: 100vh;
        padding-top: 86px;
        overflow: hidden;
        background:
          radial-gradient(circle at 14% 14%, rgba(60, 190, 174, 0.22), transparent 34%),
          radial-gradient(circle at 84% 18%, rgba(184, 119, 4, 0.18), transparent 34%),
          linear-gradient(135deg, rgba(50, 60, 64, 1), rgba(35, 45, 48, 1));
      }

      .legal-main::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -2;
        background: url("assets/hero-lcp.jpg") center / cover no-repeat;
        opacity: 0.22;
        transform: scale(1.03);
      }

      .legal-main::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        background:
          linear-gradient(90deg, rgba(50, 60, 64, 0.88), rgba(50, 60, 64, 0.72)),
          radial-gradient(circle at 50% 100%, rgba(60, 190, 174, 0.12), transparent 48%);
      }

      .legal-section {
        min-height: calc(100vh - 86px);
        padding-block: clamp(70px, 9vw, 118px);
      }

      .legal-shell {
        display: grid;
        gap: clamp(24px, 4vw, 42px);
      }

      .legal-hero-card {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(250px, 0.42fr);
        gap: clamp(22px, 4vw, 54px);
        align-items: start;
        border: 1px solid rgba(60, 190, 174, 0.22);
        border-radius: clamp(24px, 4vw, 34px);
        background: rgba(255, 255, 255, 0.065);
        box-shadow: var(--shadow);
        padding: clamp(28px, 5vw, 56px);
        backdrop-filter: blur(18px);
        overflow: hidden;
      }

      .legal-hero-card .section-header {
        max-width: 780px;
        margin: 0;
        min-width: 0;
      }

      .legal-hero-card h1 {
        margin-bottom: 14px;
        white-space: normal;
      }

      .legal-hero-card .section-lead {
        max-width: 68ch;
        white-space: normal;
        overflow-wrap: anywhere;
      }

      .legal-updated {
        justify-self: end;
        width: min(100%, 360px);
        border: 1px solid rgba(184, 119, 4, 0.38);
        border-radius: var(--radius-sm);
        background: rgba(184, 119, 4, 0.13);
        padding: 18px;
        color: var(--fg);
        font-family: var(--mono);
        font-size: 0.88rem;
        overflow-wrap: anywhere;
        word-break: normal;
      }

      .legal-updated strong {
        display: block;
        color: var(--c-green-blue);
        margin-bottom: 4px;
        text-transform: uppercase;
        letter-spacing: 0.12em;
        font-size: 0.72rem;
      }

      @media (max-width: 980px) {
        .legal-hero-card {
          grid-template-columns: 1fr;
        }

        .legal-updated {
          justify-self: stretch;
          width: 100%;
        }
      }

      .legal-grid {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 18px;
      }

      .legal-toc ol {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
        gap: 10px 24px;
        margin: 0;
        padding-left: 1.3rem;
      }

      .legal-toc a {
        color: rgba(243, 251, 250, 0.82);
      }

      .legal-overview {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
        gap: 14px;
        margin: 20px 0 4px;
      }

      .legal-overview > div {
        border: 1px solid rgba(60, 190, 174, 0.2);
        border-radius: var(--radius-sm);
        background: rgba(60, 190, 174, 0.08);
        padding: 16px;
      }

      .legal-overview strong {
        display: block;
        margin-bottom: 6px;
        color: var(--c-green-blue);
        font-family: var(--mono);
        font-size: 0.78rem;
        letter-spacing: 0.08em;
        text-transform: uppercase;
      }

      .legal-card {
        border: 1px solid rgba(60, 190, 174, 0.24);
        border-radius: var(--radius);
        background: rgba(255, 255, 255, 0.078);
        box-shadow: 0 18px 46px rgba(0, 0, 0, 0.22);
        padding: clamp(22px, 4vw, 38px);
        backdrop-filter: blur(14px);
      }

      .legal-card h2 {
        margin: 0 0 18px;
        color: var(--fg);
        font-family: var(--mono);
        font-size: clamp(22px, 2.8vw, 32px);
        line-height: 1.18;
      }

      .legal-card h3 {
        margin: 24px 0 8px;
        color: var(--c-green-blue);
        font-family: var(--mono);
        font-size: clamp(16px, 2vw, 20px);
      }

      .legal-card p,
      .legal-card li {
        color: rgba(243, 251, 250, 0.78);
      }

      .legal-card p {
        margin: 0 0 14px;
      }

      .legal-card strong {
        color: var(--fg);
      }

      .legal-card ul {
        margin: 0;
        padding-left: 1.1rem;
      }

      .legal-card li + li {
        margin-top: 8px;
      }

      .legal-list {
        display: grid;
        gap: 0;
        margin: 0;
      }

      .legal-list > div {
        display: grid;
        grid-template-columns: minmax(180px, 260px) minmax(0, 1fr);
        gap: 18px;
        padding: 15px 0;
        border-top: 1px solid rgba(243, 251, 250, 0.12);
      }

      .legal-list dt {
        color: var(--c-green-blue);
        font-family: var(--mono);
        font-size: 0.78rem;
        font-weight: 700;
        letter-spacing: 0.12em;
        text-transform: uppercase;
      }

      .legal-list dd {
        margin: 0;
        color: rgba(243, 251, 250, 0.78);
      }

      .legal-table-wrap {
        width: 100%;
        overflow-x: auto;
        margin: 16px 0 22px;
        border: 1px solid rgba(60, 190, 174, 0.18);
        border-radius: var(--radius-sm);
      }

      .legal-table {
        width: 100%;
        min-width: 720px;
        border-collapse: collapse;
        table-layout: fixed;
      }

      .legal-table th,
      .legal-table td {
        padding: 13px 14px;
        text-align: left;
        vertical-align: top;
        border-bottom: 1px solid rgba(243, 251, 250, 0.12);
      }

      .legal-table th {
        color: var(--c-green-blue);
        background: rgba(60, 190, 174, 0.1);
        font-family: var(--mono);
        font-size: 0.76rem;
        letter-spacing: 0.1em;
        text-transform: uppercase;
      }

      .legal-table td {
        color: rgba(243, 251, 250, 0.78);
        overflow-wrap: anywhere;
      }

      .legal-table td:first-child {
        color: var(--fg);
        font-family: var(--mono);
        font-weight: 700;
      }

      .legal-table tbody tr:nth-child(even) {
        background: rgba(255, 255, 255, 0.035);
      }

      .legal-summary-table th,
      .legal-summary-table td {
        width: 25%;
      }

      .legal-table tr:last-child td {
        border-bottom: 0;
      }

      .legal-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
        margin-top: 22px;
      }

      .legal-note {
        border-left: 3px solid var(--c-amber-orange);
        background: rgba(184, 119, 4, 0.12);
        border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
        padding: 16px 18px;
      }

      @media (max-width: 760px) {
        .legal-hero-card {
          grid-template-columns: 1fr;
        }

        .legal-updated {
          justify-self: stretch;
          width: 100%;
        }

        .legal-list > div {
          grid-template-columns: 1fr;
          gap: 6px;
        }

        .legal-table-wrap {
          overflow: visible;
        }

        .legal-table {
          min-width: 0;
          display: block;
        }

        .legal-table thead {
          position: absolute;
          width: 1px;
          height: 1px;
          overflow: hidden;
          clip: rect(0 0 0 0);
          white-space: nowrap;
        }

        .legal-table tbody,
        .legal-table tr,
        .legal-table td {
          display: block;
          width: 100%;
        }

        .legal-table tr {
          padding: 12px 14px;
          border-bottom: 1px solid rgba(243, 251, 250, 0.12);
        }

        .legal-table tr:last-child {
          border-bottom: 0;
        }

        .legal-table td {
          position: relative;
          min-height: 34px;
          padding: 7px 0 7px 106px;
          border-bottom: 0;
        }

        .legal-table td::before {
          content: "";
          position: absolute;
          left: 0;
          top: 7px;
          width: 88px;
          color: var(--c-green-blue);
          font-family: var(--mono);
          font-size: 0.68rem;
          font-weight: 700;
          letter-spacing: 0.08em;
          text-transform: uppercase;
        }

        .legal-table:not(.legal-summary-table) td:nth-child(1)::before {
          content: "Name";
        }

        .legal-table:not(.legal-summary-table) td:nth-child(2)::before {
          content: "Zweck";
        }

        .legal-table:not(.legal-summary-table) td:nth-child(3)::before {
          content: "Dauer";
        }

        .legal-summary-table td:nth-child(1)::before {
          content: "Bereich";
        }

        .legal-summary-table td:nth-child(2)::before {
          content: "Daten";
        }

        .legal-summary-table td:nth-child(3)::before {
          content: "Zweck";
        }

        .legal-summary-table td:nth-child(4)::before {
          content: "Kontrolle";
        }
      }

      a:hover {
        text-decoration: underline;
        text-decoration-thickness: 2px;
        text-underline-offset: 3px;
      }

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

      .container {
        width: min(var(--max), calc(100% - 2 * var(--gutter)));
        margin-inline: auto;
      }

      .skip-link {
        position: absolute;
        left: -999px;
        top: 10px;
        z-index: 9999;
        padding: 12px 14px;
        color: var(--c-black);
        background: var(--c-white);
        border-radius: 10px;
      }

      .skip-link:focus-visible {
        left: 10px;
      }

      /* Header */
      .site-header {
        position: sticky;
        top: 0;
        z-index: 50;
        border-bottom: 1px solid rgba(243, 251, 250, 0.12);
        background: rgba(50, 60, 64, 0.72);
        backdrop-filter: blur(14px);
        transition: background 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
      }

      .site-header.is-scrolled {
        background: rgba(50, 60, 64, 0.84);
        border-bottom-color: rgba(60, 190, 174, 0.14);
        box-shadow: 0 16px 44px rgba(0, 0, 0, 0.28);
      }

      .header-inner {
        display: grid;
        grid-template-columns: auto 1fr auto;
        align-items: center;
        gap: 18px;
        min-height: 72px;
        padding: 12px 0;
      }

      .brand img {
        width: 132px;
        height: auto;
      }

      .site-nav {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: clamp(10px, 1.3vw, 18px);
        font-family: var(--mono);
        font-size: 13px;
      }

      .site-nav a {
        position: relative;
        padding: 10px 10px;
        border-radius: 12px;
        opacity: 0.9;
      }

      .site-nav a:hover,
      .site-nav a:focus-visible,
      .site-nav a.is-active {
        opacity: 1;
        text-decoration: none;
        background: rgba(255, 255, 255, 0.06);
      }

      .site-nav a.nav-cta {
        color: var(--c-black);
        background: var(--c-green-blue);
        border: 1px solid rgba(0, 0, 0, 0.08);
        box-shadow: 0 10px 26px rgba(0, 0, 0, 0.26);
      }

      .site-nav a.nav-cta:hover,
      .site-nav a.nav-cta:focus-visible {
        background: color-mix(in srgb, var(--c-green-blue) 85%, var(--c-white));
      }

      .header-actions {
        display: flex;
        align-items: center;
        gap: 10px;
      }

      .icon-button {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        padding: 10px 12px;
        color: var(--fg);
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(243, 251, 250, 0.16);
        border-radius: 999px;
        cursor: pointer;
        user-select: none;
      }

      .icon-button:hover {
        background: rgba(255, 255, 255, 0.08);
      }

      .lang-button[aria-pressed="true"] {
        color: color-mix(in srgb, var(--c-green-blue) 70%, var(--fg));
        background: rgba(60, 190, 174, 0.16);
        border-color: rgba(60, 190, 174, 0.38);
      }

      .icon-button-label {
        font-family: var(--mono);
        font-size: 13px;
        letter-spacing: 0.01em;
        opacity: 0.95;
      }

      .lang-toggle {
        display: flex;
        align-items: center;
        gap: 10px;
      }

      .lang-button {
        padding: 10px 12px;
      }

      .flag {
        width: 22px;
        height: 16px;
        border-radius: 5px;
        overflow: hidden;
        box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.18);
      }

      .flag svg {
        display: block;
        width: 100%;
        height: 100%;
      }

      .menu-toggle {
        display: none;
        padding: 10px 12px;
      }

      .menu-bars {
        display: grid;
        gap: 5px;
      }

      .menu-bars span {
        width: 18px;
        height: 2px;
        background: currentColor;
        border-radius: 999px;
      }

      /* Hero */
      .hero {
        position: relative;
        overflow: hidden;
        isolation: isolate;
        padding: clamp(70px, 9vw, 120px) 0 clamp(56px, 8vw, 92px);
      }

      .hero-bg {
        position: absolute;
        inset: 0;
        z-index: -2;
      }

      .hero-picture,
      .hero-img {
        position: absolute;
        inset: 0;
      }

      .hero-picture {
        display: block;
      }

      .hero-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: 50% 40%;
        filter: saturate(0.9) contrast(1.02);
        transform: scale(1.05);
      }

      .hero-overlay {
        position: absolute;
        inset: 0;
        z-index: 1;
        background: radial-gradient(circle at 20% 25%, rgba(60, 190, 174, 0.34), transparent 52%),
          radial-gradient(circle at 85% 40%, rgba(184, 119, 4, 0.22), transparent 54%),
          linear-gradient(180deg, rgba(10, 16, 18, 0.64), rgba(10, 16, 18, 0.78));
      }

      .hero-waves {
        position: absolute;
        left: 0;
        right: 0;
        bottom: -20px;
        width: 100%;
        height: 230px;
        z-index: 2;
        opacity: 0.9;
        pointer-events: none;
        filter: blur(0.2px);
      }

      @media (prefers-reduced-motion: no-preference) {
        .hero-waves {
          animation: waves 12s linear infinite;
        }

        @keyframes waves {
          0% {
            transform: translateX(0);
          }
          100% {
            transform: translateX(-80px);
          }
        }
      }

      .hero-inner {
        position: relative;
        z-index: 5;
        display: grid;
        align-items: center;
        gap: clamp(26px, 4vw, 56px);
      }

      .hero-copy {
        width: 100%;
      }

      .hero-visual {
        display: none;
        justify-self: end;
      }

      .hero-chip-wrap {
        position: relative;
        width: min(520px, 40vw);
      }

      .hero-chip-wrap::before {
        content: "";
        position: absolute;
        inset: -14%;
        background: radial-gradient(circle at 40% 30%, rgba(60, 190, 174, 0.28), transparent 60%),
          radial-gradient(circle at 70% 70%, rgba(184, 119, 4, 0.18), transparent 58%);
        filter: blur(18px);
        opacity: 0.9;
        pointer-events: none;
      }

      .hero-chip {
        position: relative;
        width: 100%;
        height: auto;
        filter: drop-shadow(0 32px 60px rgba(0, 0, 0, 0.45));
        transform-origin: 55% 55%;
        will-change: transform, opacity;
      }

      @media (min-width: 940px) {
        .hero-inner {
          grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
        }

        .hero-visual {
          display: block;
        }
      }

      .eyebrow {
        margin: 0 0 14px;
        font-family: var(--mono);
        font-size: clamp(14px, 1.05vw, 15px);
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: color-mix(in srgb, var(--c-green-blue) 88%, var(--c-white));
        opacity: 0.95;
      }

      .wordmark {
        width: min(420px, 84vw);
        margin: 0 0 18px;
        filter: drop-shadow(0 16px 30px rgba(0, 0, 0, 0.35));
      }

      .hero-title {
        margin: 0 0 14px;
        font-family: var(--mono);
        font-weight: 400;
        font-size: clamp(34px, 5.2vw, 64px);
        line-height: 1.12;
        letter-spacing: -0.01em;
        text-transform: lowercase;
      }

      .hero-lead {
        margin: 0 0 24px;
        max-width: 56ch;
        font-size: clamp(16px, 1.8vw, 18px);
        color: var(--muted);
      }

      .hero-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
        margin-bottom: 26px;
      }

      .button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        min-height: 46px;
        padding: 12px 18px;
        border-radius: 999px;
        font-family: var(--mono);
        font-size: 13px;
        font-weight: 600;
        letter-spacing: 0.01em;
        border: 1px solid rgba(243, 251, 250, 0.18);
        transition: transform 180ms ease, background 180ms ease, border-color 180ms ease;
      }

      .button:hover,
      .button:focus-visible {
        text-decoration: none;
        transform: translateY(-1px);
      }

      .button-primary {
        color: var(--c-black);
        background: var(--c-green-blue);
        border-color: rgba(0, 0, 0, 0.06);
        box-shadow: 0 16px 35px rgba(0, 0, 0, 0.32);
      }

      .button-primary:hover,
      .button-primary:focus-visible {
        background: color-mix(in srgb, var(--c-green-blue) 86%, var(--c-white));
      }

      .button-ghost {
        background: rgba(255, 255, 255, 0.04);
      }

      .button-ghost:hover,
      .button-ghost:focus-visible {
        background: rgba(255, 255, 255, 0.08);
      }

      .hero-metrics {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 10px;
        padding: 14px;
        border-radius: var(--radius);
        border: 1px solid rgba(243, 251, 250, 0.14);
        background: rgba(0, 0, 0, 0.22);
        box-shadow: var(--shadow);
        will-change: transform, opacity;
      }

      .metric {
        padding: 10px 12px;
        border-radius: 14px;
        background: rgba(255, 255, 255, 0.05);
      }

      .metric strong {
        display: block;
        font-family: var(--mono);
        font-size: 15px;
        font-weight: 600;
        color: color-mix(in srgb, var(--c-green-blue) 82%, var(--c-white));
      }

      .metric span {
        display: block;
        font-size: 13px;
        color: rgba(243, 251, 250, 0.75);
      }

      @media (prefers-reduced-motion: no-preference) {
        .hero-chip {
          opacity: 0;
          transform: scale(0.86) translateY(10px);
          animation: heroChipIn 900ms cubic-bezier(0.16, 1, 0.3, 1) 180ms forwards;
        }

        .hero-metrics {
          opacity: 0;
          transform: translateX(-22px);
          animation: heroMetricsIn 800ms cubic-bezier(0.16, 1, 0.3, 1) 260ms forwards;
        }

        .hero-metrics .metric {
          opacity: 0;
          transform: translateX(-10px);
          animation: heroMetricStagger 680ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
        }

        .hero-metrics .metric:nth-child(1) {
          animation-delay: 340ms;
        }

        .hero-metrics .metric:nth-child(2) {
          animation-delay: 420ms;
        }

        .hero-metrics .metric:nth-child(3) {
          animation-delay: 500ms;
        }

        @keyframes heroChipIn {
          to {
            opacity: 1;
            transform: scale(1) translateY(0);
          }
        }

        @keyframes heroMetricsIn {
          to {
            opacity: 1;
            transform: translateX(0);
          }
        }

        @keyframes heroMetricStagger {
          to {
            opacity: 1;
            transform: translateX(0);
          }
        }
      }

      /* Sections */
      .section {
        padding: clamp(64px, 9vw, 110px) 0;
      }

      .section:nth-of-type(even) {
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent 60%);
      }

      .section.contact {
        background: linear-gradient(180deg, rgba(184, 119, 4, 0.08), rgba(255, 255, 255, 0.02));
      }

      .section-header {
        margin-bottom: 26px;
        max-width: 72ch;
      }

      .section-header.center {
        margin-inline: auto;
        text-align: center;
      }

      h2 {
        margin: 0 0 10px;
        font-family: var(--mono);
        font-size: clamp(26px, 3.7vw, 42px);
        line-height: 1.18;
        letter-spacing: -0.01em;
      }

      .section-lead {
        margin: 0;
        color: var(--muted);
        font-size: 16px;
      }

      /* Tabs */
      .tabs,
      .caps {
        margin-top: 26px;
      }

      .tablist {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        margin-bottom: 14px;
      }

      .tab {
        padding: 10px 14px;
        border-radius: 999px;
        border: 1px solid rgba(243, 251, 250, 0.16);
        background: rgba(255, 255, 255, 0.04);
        color: var(--fg);
        cursor: pointer;
        font-family: var(--mono);
        font-size: 13px;
        letter-spacing: 0.01em;
        transition: background 160ms ease, border-color 160ms ease, transform 160ms ease;
      }

      .tab[aria-selected="true"] {
        color: var(--c-black);
        background: var(--c-green-blue);
        border-color: rgba(0, 0, 0, 0.1);
      }

      .tab:hover {
        transform: translateY(-1px);
      }

      .panel {
        padding: clamp(16px, 2.4vw, 22px);
        border-radius: var(--radius);
        border: 1px solid rgba(243, 251, 250, 0.16);
        background: rgba(255, 255, 255, 0.06);
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.22);
      }

      .panel-grid {
        display: grid;
        grid-template-columns: minmax(0, 1.1fr) minmax(160px, 0.6fr);
        gap: 18px;
        align-items: center;
      }

      .panel-copy h3 {
        margin: 0 0 8px;
        font-family: var(--mono);
        font-size: 18px;
        letter-spacing: -0.01em;
      }

      .panel-copy p {
        margin: 0 0 12px;
        color: rgba(243, 251, 250, 0.8);
      }

      .bullets {
        margin: 0 0 12px;
        padding-left: 18px;
        color: rgba(243, 251, 250, 0.78);
      }

      .bullets li {
        margin: 6px 0;
      }

      .chip {
        margin: 0;
        padding: 12px 14px;
        border-radius: 14px;
        border: 1px dashed rgba(184, 119, 4, 0.55);
        background: rgba(184, 119, 4, 0.12);
        color: rgba(255, 255, 255, 0.88);
      }

      .panel-media {
        width: min(180px, 100%);
        margin-inline: auto;
        opacity: 0.98;
      }

      .panel-diagram img {
        width: 100%;
        border-radius: 14px;
        background: rgba(255, 255, 255, 0.92);
        padding: clamp(8px, 1.4vw, 14px);
      }

      /* Services */
      .services-grid {
        margin-top: 26px;
        display: grid;
        grid-template-columns: 1fr;
        gap: 14px;
      }

      @media (min-width: 760px) {
        .services-grid {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }
      }

      .service-grid {
        grid-template-columns: 1fr;
      }

      .service-heading {
        display: grid;
        grid-template-columns: 72px 1fr;
        gap: 14px;
        align-items: center;
        margin-bottom: 10px;
      }

      .service-icon {
        appearance: none;
        padding: 0;
        color: inherit;
        font: inherit;
        width: 72px;
        height: 72px;
        border-radius: 18px;
        overflow: hidden;
        box-shadow: 0 14px 28px rgba(0, 0, 0, 0.28);
        border: 1px solid rgba(0, 0, 0, 0.35);
        background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.85), rgba(60, 190, 174, 0.45) 60%);
        transition: transform 180ms ease, box-shadow 180ms ease, filter 180ms ease;
        transform: translateZ(0);
      }

      .service-icon svg,
      .service-icon img {
        width: 100%;
        height: 100%;
        display: block;
      }

      .service-icon svg {
        display: none;
      }

      .service-icon img {
        object-fit: contain;
        padding: 10px;
        background: rgba(255, 255, 255, 0.92);
      }

      .service-card:hover .service-icon,
      .service-card:focus-within .service-icon {
        transform: translateY(-2px) rotate(-0.6deg);
        filter: saturate(1.06);
        box-shadow: 0 18px 36px rgba(0, 0, 0, 0.32), 0 0 0 1px rgba(60, 190, 174, 0.26);
      }

      /* Capability tables */
      .panel-table {
        overflow: hidden;
      }

      .cap-table {
        overflow-x: auto;
        border-radius: 14px;
        border: 1px solid rgba(243, 251, 250, 0.14);
        background: rgba(255, 255, 255, 0.03);
      }

      .cap-table table {
        width: 100%;
        border-collapse: collapse;
        min-width: 640px;
      }

      .cap-table caption {
        text-align: left;
        padding: 12px 14px 10px;
        font-family: var(--mono);
        font-size: 12px;
        letter-spacing: 0.02em;
        text-transform: uppercase;
        color: rgba(243, 251, 250, 0.72);
      }

      .cap-table thead th {
        padding: 12px 14px;
        font-family: var(--mono);
        font-size: 12px;
        letter-spacing: 0.02em;
        text-transform: uppercase;
        color: rgba(243, 251, 250, 0.75);
        background: rgba(255, 255, 255, 0.03);
        border-bottom: 1px solid rgba(243, 251, 250, 0.12);
        white-space: nowrap;
      }

      .cap-table tbody th,
      .cap-table tbody td {
        padding: 12px 14px;
        border-bottom: 1px solid rgba(243, 251, 250, 0.12);
        vertical-align: top;
        color: rgba(243, 251, 250, 0.82);
        font-size: 13px;
      }

      .cap-table tbody th {
        font-family: var(--mono);
        font-weight: 600;
        color: rgba(243, 251, 250, 0.9);
        white-space: nowrap;
      }

      .cap-table tbody tr:last-child th,
      .cap-table tbody tr:last-child td {
        border-bottom: 0;
      }

      .cap-row {
        outline: none;
        transition: background 150ms ease;
      }

      .cap-row:hover,
      .cap-row:focus-visible {
        background: rgba(60, 190, 174, 0.08);
      }

      .cap-hint {
        margin: 12px 0 0;
        padding: 12px 14px;
        border-radius: 14px;
        border: 1px solid rgba(243, 251, 250, 0.14);
        background: rgba(255, 255, 255, 0.03);
        color: rgba(243, 251, 250, 0.74);
      }

      /* Timeline */
      .timeline {
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 12px;
        margin-top: 26px;
      }

      .step {
        padding: 16px 16px 18px;
        border-radius: var(--radius-sm);
        border: 1px solid rgba(243, 251, 250, 0.14);
        background: rgba(255, 255, 255, 0.05);
      }

      .step h3 {
        margin: 0 0 6px;
        font-family: var(--mono);
        font-size: 15px;
        color: color-mix(in srgb, var(--c-green-blue) 70%, var(--c-white));
      }

      .step p {
        margin: 0;
        color: rgba(243, 251, 250, 0.76);
        font-size: 14px;
      }

      /* Process (interactive) */
      .process-panel {
        margin-top: 26px;
        padding: clamp(16px, 2.4vw, 22px);
        border-radius: var(--radius);
        border: 1px solid rgba(243, 251, 250, 0.16);
        background: rgba(255, 255, 255, 0.06);
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.22);
      }

      .process-desktop {
        display: block;
      }

      .process-grid {
        position: relative;
        display: grid;
        grid-template-columns: 240px 1fr;
        gap: 16px;
        padding: 6px;
      }

      .process-hover {
        position: absolute;
        left: 6px;
        right: 6px;
        top: 6px;
        height: 108px;
        border-radius: 26px;
        border: 1px solid rgba(60, 190, 174, 0.26);
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.04));
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.24);
        transform: translateY(0);
        transition: transform 260ms ease, opacity 200ms ease;
        opacity: 1;
        pointer-events: none;
      }

      .process-stages {
        position: relative;
      }

      .process-stage-slot {
        height: 108px;
        display: flex;
        align-items: center;
        position: relative;
        z-index: 2;
      }

      .process-stage-slot:not(:last-child)::after {
        content: "";
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        bottom: -10px;
        width: 2px;
        height: 18px;
        border-radius: 999px;
        background: rgba(184, 119, 4, 0.6);
        opacity: 0.9;
      }

      .process-stage-slot:not(:last-child)::before {
        content: "";
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        bottom: -14px;
        width: 0;
        height: 0;
        border-left: 6px solid transparent;
        border-right: 6px solid transparent;
        border-top: 8px solid rgba(184, 119, 4, 0.68);
        opacity: 0.9;
      }

      .process-chevron {
        position: relative;
        width: 100%;
        min-height: 92px;
        padding: 14px 14px;
        border-radius: 26px;
        cursor: default;
        text-align: center;
        display: grid;
        place-items: center;
        gap: 4px;
        clip-path: polygon(0 14%, 50% 0, 100% 14%, 100% 86%, 50% 100%, 0 86%);
        transition: transform 220ms ease, opacity 220ms ease, border-color 220ms ease, background 220ms ease;
        border: 1px solid rgba(243, 251, 250, 0.18);
        background: rgba(255, 255, 255, 0.04);
        color: var(--fg);
        transform: translateZ(0);
      }

      .process-chevron[data-accent="filled"] {
        border-color: rgba(184, 119, 4, 0.55);
        background: rgba(184, 119, 4, 0.14);
      }

      .process-chevron[data-accent="outline"] {
        border-color: rgba(243, 251, 250, 0.24);
        background: rgba(243, 251, 250, 0.13);
      }

      .process-chevron:hover {
        transform: translateZ(0);
      }

      .process-chevron.is-focus {
        transform: translateZ(0);
      }

      .process-chevron.is-dimmed {
        opacity: 1;
      }

      .process-phase {
        display: block;
        font-family: var(--mono);
        font-size: 14px;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.18em;
      }

      .process-label {
        display: block;
        font-family: var(--mono);
        font-size: 11px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.22em;
        color: rgba(243, 251, 250, 0.68);
      }

      .process-rows {
        position: relative;
        z-index: 2;
      }

      .process-row {
        width: 100%;
        min-height: 108px;
        padding: 12px 14px;
        border: 0;
        background: transparent;
        cursor: default;
        text-align: left;
        display: flex;
        align-items: center;
        gap: 14px;
        border-radius: 26px;
        transition: opacity 220ms ease;
      }

      .process-row:hover {
        transform: none;
      }

      .process-row.is-dimmed {
        opacity: 0.6;
      }

      .process-row-dot {
        flex: 0 0 auto;
        width: 10px;
        height: 10px;
        border-radius: 999px;
        background: rgba(184, 119, 4, 0.7);
        transition: background 200ms ease, box-shadow 200ms ease;
      }

      .process-row.is-focus .process-row-dot {
        background: rgba(184, 119, 4, 0.7);
        box-shadow: none;
      }

      .process-row-text {
        display: block;
        max-width: 78ch;
        font-size: 16px;
        line-height: 1.55;
        color: rgba(243, 251, 250, 0.86);
        font-weight: 500;
      }

      .process-row.is-focus .process-row-text {
        color: rgba(243, 251, 250, 0.86);
      }

      .process-mobile {
        display: none;
        padding: 6px;
      }

      .process-mobile-grid {
        display: grid;
        gap: 12px;
      }

      .process-mobile-card {
        width: 100%;
        border-radius: 24px;
        border: 1px solid rgba(243, 251, 250, 0.16);
        background: rgba(255, 255, 255, 0.05);
        padding: 16px;
        text-align: left;
        cursor: default;
        color: var(--fg);
        transition: transform 180ms ease, border-color 180ms ease, background 180ms ease;
      }

      .process-mobile-card:hover {
        transform: none;
        background: rgba(255, 255, 255, 0.05);
      }

      .process-mobile-card.is-active {
        border-color: rgba(243, 251, 250, 0.16);
        background: rgba(255, 255, 255, 0.05);
      }

      .process-mobile-top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        margin-bottom: 12px;
      }

      .process-mobile-pill {
        display: inline-flex;
        align-items: center;
        border-radius: 999px;
        padding: 6px 10px;
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.2em;
        background: rgba(60, 190, 174, 0.12);
        color: color-mix(in srgb, var(--c-green-blue) 80%, var(--fg));
        font-family: var(--mono);
      }

      .process-mobile-dot {
        width: 12px;
        height: 12px;
        border-radius: 999px;
        background: var(--c-amber-orange);
      }

      .process-mobile-card.is-active .process-mobile-dot {
        background: var(--c-amber-orange);
      }

      .process-mobile-phase {
        font-family: var(--mono);
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.12em;
        font-size: 15px;
      }

      .process-mobile-label {
        margin-top: 6px;
        font-family: var(--mono);
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.18em;
        font-size: 12px;
        color: rgba(243, 251, 250, 0.68);
      }

      .process-mobile-summary {
        margin-top: 10px;
        color: rgba(243, 251, 250, 0.82);
        line-height: 1.6;
        font-size: 14px;
      }

      /* Reference projects */
      .ref-projects {
        display: grid;
        gap: 16px;
        margin-top: 26px;
      }

      .ref-project {
        display: grid;
        grid-template-columns: 1fr;
        gap: 14px;
        padding: clamp(16px, 2.4vw, 22px);
        border-radius: var(--radius);
        border: 1px solid rgba(243, 251, 250, 0.14);
        background: rgba(255, 255, 255, 0.05);
        box-shadow: 0 20px 70px rgba(0, 0, 0, 0.2);
      }

      @media (min-width: 860px) {
        .ref-project {
          grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
          align-items: stretch;
        }
      }

      .ref-media {
        appearance: none;
        display: block;
        width: 100%;
        padding: 0;
        color: inherit;
        font: inherit;
        text-align: left;
        overflow: hidden;
        border-radius: 16px;
        border: 1px solid rgba(243, 251, 250, 0.14);
        background: rgba(255, 255, 255, 0.88);
        box-shadow: 0 18px 44px rgba(0, 0, 0, 0.32);
      }

      .ref-media picture,
      .ref-media img {
        display: block;
        width: 100%;
        height: 100%;
      }

      .ref-media img {
        aspect-ratio: 4 / 3;
        object-fit: cover;
        transform: scale(1.01);
        filter: saturate(0.98) contrast(1.02);
      }

      .ref-details {
        display: grid;
        gap: 14px;
      }

      @media (min-width: 1020px) {
        .ref-details {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }
      }

      .ref-box {
        border-radius: 16px;
        border: 1px solid rgba(243, 251, 250, 0.14);
        background: rgba(0, 0, 0, 0.2);
        padding: 14px 14px 16px;
      }

      .ref-box h3 {
        margin: 0;
        font-family: var(--mono);
        font-size: 16px;
        letter-spacing: -0.01em;
      }

      .ref-split {
        margin-top: 12px;
        display: grid;
        gap: 12px;
      }

      .ref-box h4 {
        margin: 0 0 6px;
        font-family: var(--mono);
        font-size: 12px;
        text-transform: uppercase;
        letter-spacing: 0.12em;
        color: rgba(243, 251, 250, 0.72);
      }

      .ref-box p {
        margin: 0;
        color: rgba(243, 251, 250, 0.82);
      }

      .ref-box .bullets {
        margin-top: 10px;
        margin-bottom: 0;
      }

      .meta {
        margin: 0;
        color: rgba(243, 251, 250, 0.74);
      }

      .note {
        margin: 10px 0 0;
        padding-left: 12px;
        border-left: 3px solid rgba(184, 119, 4, 0.65);
        color: rgba(243, 251, 250, 0.82);
      }

      /* People */
      .people {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 14px;
        margin-top: 26px;
      }

      .person {
        overflow: hidden;
        border-radius: var(--radius);
        border: 1px solid rgba(243, 251, 250, 0.14);
        background: rgba(255, 255, 255, 0.05);
      }

      .person img {
        width: 100%;
        aspect-ratio: 3 / 4;
        object-fit: cover;
        object-position: 50% 0%;
        filter: saturate(0.95) contrast(1.02);
      }

      .person figcaption {
        padding: 12px 14px 14px;
        font-family: var(--mono);
        font-size: 13px;
        opacity: 0.92;
      }

      .about-copy {
        max-width: 78ch;
        margin-top: 18px;
      }

      .about-copy p {
        margin: 0 0 12px;
        color: rgba(243, 251, 250, 0.82);
      }

      .about-copy p:last-child {
        margin-bottom: 0;
      }

      .career-copy {
        max-width: none;
        margin: 0 0 24px;
        padding: clamp(16px, 2.4vw, 22px);
        border-radius: var(--radius);
        border: 1px solid rgba(60, 190, 174, 0.18);
        background: rgba(255, 255, 255, 0.055);
      }

      .career-copy p {
        margin: 0;
        color: rgba(243, 251, 250, 0.82);
      }

      #career .section-header {
        max-width: 100%;
        margin-inline: 0;
        text-align: left;
      }

      #career h2,
      #career .section-lead {
        white-space: nowrap;
      }

      @media (max-width: 900px) {
        #career h2,
        #career .section-lead {
          white-space: normal;
        }
      }

      /* Jobs & benefits */
      .jobs {
        display: grid;
        gap: 12px;
        margin-top: 26px;
      }

      .benefits-section .section-header {
        margin-bottom: 20px;
      }

      .benefits-heading {
        margin: 0;
        font-family: var(--mono);
        font-size: clamp(24px, 3vw, 36px);
        color: var(--fg);
      }

      .job {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
        padding: 16px 18px;
        border-radius: var(--radius);
        border: 1px solid rgba(243, 251, 250, 0.14);
        background: rgba(255, 255, 255, 0.05);
      }

      .job-title h3 {
        margin: 0;
        font-family: var(--mono);
        font-size: 15px;
      }

      .job-link {
        padding: 10px 14px;
        border-radius: 999px;
        border: 1px solid rgba(243, 251, 250, 0.16);
        background: rgba(255, 255, 255, 0.04);
        font-family: var(--mono);
        font-size: 12px;
      }

      .job-link:hover,
      .job-link:focus-visible {
        background: rgba(255, 255, 255, 0.08);
        text-decoration: none;
      }

      .benefits {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 14px;
        margin-top: 18px;
      }

      .benefit {
        display: grid;
        justify-items: center;
        gap: 8px;
        padding: 12px 10px;
        border-radius: 16px;
        border: 1px solid rgba(243, 251, 250, 0.12);
        background: rgba(255, 255, 255, 0.04);
        text-align: center;
        cursor: pointer;
        transition: transform 160ms ease, background 160ms ease, border-color 160ms ease;
        position: relative;
        color: inherit;
        font: inherit;
        appearance: none;
        min-height: 302px;
        height: 304px;
        align-content: center;
      }

      .benefit svg {
        width: 36px;
        height: 36px;
        opacity: 0.95;
        transition: transform 180ms ease, filter 180ms ease;
      }

      .benefit-icon {
        display: grid;
        place-items: center;
        width: 150px;
        height: 150px;
        max-width: 100%;
      }

      .benefit-icon--flex {
        width: 240px;
        height: 240px;
      }

      .benefit-icon--collab {
        width: 120px;
        height: 120px;
      }

      .benefit-icon img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        opacity: 0.98;
        transition: transform 180ms ease, filter 180ms ease;
      }

      .benefit span {
        font-size: 12px;
        color: rgba(243, 251, 250, 0.8);
      }

      .benefit > span:not(.benefit-icon):not(.benefit-tooltip) {
        max-width: 100%;
        min-height: 30px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        line-height: 1.22;
        text-wrap: balance;
      }

      .benefit:hover,
      .benefit:focus {
        transform: translateY(-2px);
        background: rgba(255, 255, 255, 0.06);
        border-color: rgba(60, 190, 174, 0.3);
      }

      .benefit:focus svg,
      .benefit:hover svg,
      .benefit:focus .benefit-icon img,
      .benefit:hover .benefit-icon img {
        transform: translateY(-2px) scale(1.03);
        filter: drop-shadow(0 12px 26px rgba(0, 0, 0, 0.35));
      }

      .benefit-tooltip {
        position: absolute;
        left: 50%;
        top: calc(100% + 10px);
        transform: translateX(-50%) translateY(6px);
        width: max-content;
        max-width: 240px;
        padding: 10px 12px;
        border-radius: 14px;
        border: 1px solid rgba(243, 251, 250, 0.16);
        background: rgba(0, 0, 0, 0.74);
        color: rgba(243, 251, 250, 0.9);
        font-size: 12px;
        line-height: 1.35;
        box-shadow: 0 22px 60px rgba(0, 0, 0, 0.35);
        opacity: 0;
        pointer-events: none;
        transition: opacity 140ms ease, transform 160ms ease;
        z-index: 10;
      }

      .benefit-tooltip::before {
        content: "";
        position: absolute;
        top: -7px;
        left: 50%;
        transform: translateX(-50%);
        width: 14px;
        height: 14px;
        background: rgba(0, 0, 0, 0.74);
        border-left: 1px solid rgba(243, 251, 250, 0.16);
        border-top: 1px solid rgba(243, 251, 250, 0.16);
        rotate: 45deg;
      }

      .benefit:hover .benefit-tooltip,
      .benefit:focus .benefit-tooltip {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
      }

      /* Contact */
      .contact-grid {
        display: grid;
        grid-template-columns: minmax(0, 1.12fr) minmax(260px, 0.7fr);
        gap: 14px;
        margin-top: 26px;
        align-items: start;
      }

      .form {
        padding: 18px;
        border-radius: var(--radius);
        border: 1px solid rgba(243, 251, 250, 0.16);
        background: rgba(0, 0, 0, 0.18);
        box-shadow: var(--shadow);
        transition: border-color 240ms ease, box-shadow 240ms ease, background 240ms ease, transform 240ms ease;
      }

      .form.is-contact-highlighted {
        border-color: rgba(60, 190, 174, 0.95);
        background: rgba(60, 190, 174, 0.1);
        box-shadow: 0 0 0 1px rgba(60, 190, 174, 0.48), 0 0 34px rgba(60, 190, 174, 0.42),
          0 20px 60px rgba(0, 0, 0, 0.36);
        animation: contactFormGlow 2s ease-in-out 1;
        transform: translateY(-2px);
      }

      .form.is-contact-idle-nudge {
        animation: contactIdleTilt 720ms ease-in-out 1;
      }

      @keyframes contactFormGlow {
        0% {
          box-shadow: 0 0 0 0 rgba(60, 190, 174, 0), var(--shadow);
        }
        32% {
          box-shadow: 0 0 0 6px rgba(60, 190, 174, 0.18), 0 0 42px rgba(60, 190, 174, 0.54),
            0 20px 60px rgba(0, 0, 0, 0.36);
        }
        100% {
          box-shadow: 0 0 0 1px rgba(60, 190, 174, 0.48), 0 0 34px rgba(60, 190, 174, 0.42),
            0 20px 60px rgba(0, 0, 0, 0.36);
        }
      }

      @keyframes contactIdleTilt {
        0%,
        100% {
          transform: translateY(0) rotate(0deg);
        }
        20% {
          transform: translateY(-1px) rotate(-0.7deg);
        }
        45% {
          transform: translateY(-1px) rotate(0.7deg);
        }
        70% {
          transform: translateY(-1px) rotate(-0.35deg);
        }
      }

      .form-honeypot {
        position: absolute;
        left: -100vw;
        width: 1px;
        height: 1px;
        overflow: hidden;
        opacity: 0;
        pointer-events: none;
      }

      label {
        display: block;
        margin: 10px 0 6px;
        font-family: var(--mono);
        font-size: 12px;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: rgba(243, 251, 250, 0.84);
      }

      input,
      textarea {
        width: 100%;
        padding: 12px 12px;
        border-radius: 14px;
        border: 1px solid rgba(243, 251, 250, 0.18);
        background: rgba(255, 255, 255, 0.06);
        color: var(--fg);
        font-family: var(--sans);
        font-size: 15px;
      }

      textarea {
        resize: vertical;
        min-height: 130px;
      }

      input::placeholder,
      textarea::placeholder {
        color: rgba(243, 251, 250, 0.55);
      }

      .form-actions {
        display: flex;
        gap: 12px;
        align-items: center;
        margin-top: 12px;
      }

      .form-message {
        margin: 0;
        color: rgba(243, 251, 250, 0.8);
        font-size: 13px;
      }

      .contact-card {
        padding: 18px;
        border-radius: var(--radius);
        border: 1px solid rgba(243, 251, 250, 0.14);
        background: rgba(255, 255, 255, 0.05);
      }

      .contact-card h3 {
        margin: 0 0 10px;
        font-family: var(--mono);
      }

      .copy {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        padding: 12px 12px;
        border-radius: 14px;
        border: 1px solid rgba(243, 251, 250, 0.14);
        background: rgba(255, 255, 255, 0.04);
        color: var(--fg);
        font-family: var(--mono);
        font-size: 13px;
        cursor: pointer;
        user-select: text;
        -webkit-user-select: text;
      }

      .copy span {
        color: rgba(243, 251, 250, 0.7);
        font-size: 12px;
      }

      .social {
        display: flex;
        gap: 10px;
        margin-top: 12px;
      }

      .social a {
        display: grid;
        place-items: center;
        width: 44px;
        height: 44px;
        border-radius: 14px;
        border: 1px solid rgba(60, 190, 174, 0.32);
        background: rgba(60, 190, 174, 0.08);
        box-shadow: 0 18px 44px rgba(0, 0, 0, 0.32);
        transition: transform 180ms ease, background 180ms ease, border-color 180ms ease;
      }

      .social a:hover,
      .social a:focus-visible {
        transform: translateY(-2px);
        background: rgba(255, 255, 255, 0.08);
        border-color: rgba(60, 190, 174, 0.52);
        text-decoration: none;
      }

      .social img {
        width: 22px;
        height: 22px;
        border-radius: 6px;
      }

      /* Footer */
      .site-footer {
        padding: 34px 0 46px;
        border-top: 1px solid rgba(243, 251, 250, 0.12);
        background: rgba(0, 0, 0, 0.16);
      }

      .footer-inner {
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 18px;
        align-items: end;
      }

      .footer-right {
        display: grid;
        justify-items: end;
        gap: 12px;
      }

      .footer-social {
        display: flex;
        gap: 10px;
      }

      .footer-social a {
        display: grid;
        place-items: center;
        width: 50px;
        height: 50px;
        border-radius: 16px;
        border: 1px solid rgba(60, 190, 174, 0.3);
        background: rgba(60, 190, 174, 0.08);
        box-shadow: 0 18px 44px rgba(0, 0, 0, 0.35);
        transition: transform 180ms ease, background 180ms ease, border-color 180ms ease;
      }

      .footer-social a:hover,
      .footer-social a:focus-visible {
        transform: translateY(-2px);
        background: rgba(60, 190, 174, 0.14);
        border-color: rgba(60, 190, 174, 0.5);
        text-decoration: none;
      }

      .footer-social img {
        width: 24px;
        height: 24px;
        border-radius: 6px;
      }

      .footer-left img {
        width: 190px;
        margin-bottom: 10px;
      }

      .footer-slogan {
        margin: 0;
        font-family: var(--mono);
        color: rgba(60, 190, 174, 0.85);
        text-transform: lowercase;
      }

      .site-visitors {
        margin: 10px 0 0;
        color: color-mix(in srgb, var(--c-bg) 88%, var(--fg));
        font-family: var(--mono);
        font-size: 11px;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        opacity: 0;
        transition: opacity 220ms ease;
      }

      .site-visitors.is-visible {
        opacity: 0.42;
      }

      .footer-links {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: 14px;
        font-family: var(--mono);
        font-size: 12px;
      }

      .footer-links a {
        opacity: 0.9;
      }

      small {
        grid-column: 1 / -1;
        color: rgba(243, 251, 250, 0.65);
      }

      /* Back to top */
      .to-top {
        position: fixed;
        right: 18px;
        bottom: 18px;
        z-index: 60;
        width: 46px;
        height: 46px;
        border-radius: 999px;
        border: 1px solid rgba(243, 251, 250, 0.18);
        background: rgba(50, 60, 64, 0.75);
        color: var(--fg);
        display: grid;
        place-items: center;
        box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35);
        opacity: 0;
        transform: translateY(10px);
        pointer-events: none;
        transition: opacity 180ms ease, transform 180ms ease;
      }

      .to-top.is-visible {
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
      }

      .to-top:hover {
        background: rgba(255, 255, 255, 0.06);
      }

      /* Reveal animation (JS adds .is-visible) */
      .reveal {
        opacity: 0;
        transform: translateY(10px);
        transition: opacity 520ms ease, transform 520ms ease;
      }

      .reveal.is-visible {
        opacity: 1;
        transform: translateY(0);
      }

      @media (prefers-reduced-motion: reduce) {
        * {
          scroll-behavior: auto !important;
          transition-duration: 0s !important;
          animation-duration: 0s !important;
          animation-iteration-count: 1 !important;
        }
        .reveal {
          opacity: 1;
          transform: none;
        }
      }

      /* Responsive */
      @media (max-width: 980px) {
        .site-header {
          z-index: 10000;
        }

        .menu-toggle {
          display: inline-flex;
          position: relative;
          z-index: 10002;
        }

        .icon-button-label {
          display: none;
        }

        .site-nav {
          position: fixed;
          top: 72px;
          right: 0;
          bottom: 0;
          left: 0;
          z-index: 10001;
          flex-direction: column;
          align-items: stretch;
          justify-content: flex-start;
          padding: 14px var(--gutter) 30px;
          gap: 8px;
          color: var(--fg);
          background: var(--c-bg);
          border-bottom: 1px solid rgba(60, 190, 174, 0.2);
          box-shadow: 0 28px 70px rgba(0, 0, 0, 0.46);
          min-height: calc(100dvh - 72px);
          max-height: calc(100dvh - 72px);
          overflow-y: auto;
          transform: translateY(-8px);
          opacity: 0;
          pointer-events: none;
          transition: opacity 180ms ease, transform 180ms ease;
        }

        .site-nav.is-open {
          opacity: 1;
          transform: translateY(0);
          pointer-events: auto;
        }

        .site-nav a {
          padding: 14px 16px;
          color: var(--fg);
          background: rgba(243, 251, 250, 0.07);
          border: 1px solid rgba(243, 251, 250, 0.12);
          box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.025);
          opacity: 1;
        }

        .site-nav a:hover,
        .site-nav a:focus-visible,
        .site-nav a.is-active {
          background: rgba(60, 190, 174, 0.16);
          border-color: rgba(60, 190, 174, 0.34);
        }

        .site-nav a.nav-cta {
          color: var(--c-black);
          background: var(--c-green-blue);
          border-color: rgba(60, 190, 174, 0.55);
        }

        .cards,
        .people {
          grid-template-columns: 1fr;
        }

        .timeline {
          grid-template-columns: 1fr;
        }

        .process-desktop {
          display: none;
        }

        .process-mobile {
          display: block;
        }

        .benefits {
          grid-template-columns: repeat(3, minmax(0, 1fr));
        }

        .contact-grid {
          grid-template-columns: 1fr;
        }

        .panel-grid {
          grid-template-columns: 1fr;
        }

        .hero-metrics {
          grid-template-columns: 1fr;
        }
      }
      /* Cumulative refinements */
      .icon-button-label {
        display: none;
      }

      .lang-button {
        width: 48px;
        height: 40px;
        justify-content: center;
        padding: 8px;
      }

      .site-nav a.is-active {
        color: var(--c-black);
        background: color-mix(in srgb, var(--c-green-blue) 82%, var(--c-white));
        box-shadow: 0 10px 26px rgba(0, 0, 0, 0.22);
      }

      .site-nav a.nav-cta.is-active {
        background: color-mix(in srgb, var(--c-green-blue) 74%, var(--c-white));
      }

      .hero {
        padding-top: clamp(68px, 8vw, 106px);
      }

      .hero-copy {
        min-width: 0;
      }

      .hero-title {
        font-size: clamp(36px, 4.3vw, 58px);
        line-height: 1.08;
      }

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

      .hero-chip-wrap {
        width: min(620px, 43vw);
      }

      .hero-chip-wrap::before {
        display: none;
      }

      .hero-chip {
        filter: drop-shadow(0 32px 58px rgba(0, 0, 0, 0.34));
      }

      @media (min-width: 940px) {
        .hero-inner {
          grid-template-columns: minmax(0, 0.86fr) minmax(360px, 1fr);
        }
      }

      @media (prefers-reduced-motion: no-preference) {
        .hero-chip {
          animation-duration: 1200ms;
          animation-delay: 260ms;
        }

        .hero-metrics {
          animation-duration: 1200ms;
          animation-delay: 260ms;
        }

        .hero-metrics .metric {
          animation-duration: 980ms;
        }
      }

      .solution-intro {
        display: grid;
        grid-template-columns: 1fr;
        gap: clamp(22px, 4vw, 54px);
        align-items: center;
        margin-bottom: clamp(48px, 6vw, 72px);
      }

      @media (min-width: 860px) {
        .solution-intro {
          grid-template-columns: minmax(280px, 0.78fr) minmax(0, 1.22fr);
        }
      }

      .solution-intro-media img {
        width: min(440px, 100%);
        margin-inline: auto;
        filter: drop-shadow(0 28px 54px rgba(0, 0, 0, 0.28));
      }

      .solution-intro-copy {
        margin: 0;
        color: rgba(243, 251, 250, 0.84);
        font-size: clamp(17px, 1.7vw, 20px);
        line-height: 1.75;
      }

      #services {
        padding-top: clamp(76px, 8vw, 112px);
      }

      #services .section-header {
        max-width: 100%;
      }

      #services-title {
        white-space: nowrap;
        font-size: clamp(34px, 5vw, 58px);
      }

      #services .section-lead:empty {
        display: none;
      }

      #services .section-lead {
        display: none;
      }

      .services-grid {
        gap: clamp(16px, 2vw, 24px);
      }

      .service-card {
        background: rgba(255, 255, 255, 0.075);
      }

      .service-icon {
        cursor: zoom-in;
        background: rgba(243, 251, 250, 0.1);
        border-color: rgba(60, 190, 174, 0.24);
      }

      .service-icon img {
        object-fit: contain;
        padding: 6px;
        background: transparent;
      }

      .section-header.align-left,
      #process .section-header,
      #capabilities .section-header,
      #projects .section-header {
        max-width: 100%;
        margin-inline: 0;
        text-align: left;
      }

      #process,
      #capabilities,
      #projects,
      #about,
      #career,
      #benefits,
      #contact {
        padding-top: clamp(68px, 7vw, 96px);
        padding-bottom: clamp(68px, 7vw, 96px);
      }

      .work-models {
        display: grid;
        grid-template-columns: 1fr;
        gap: clamp(18px, 2.6vw, 30px);
        margin-top: 26px;
      }

      @media (min-width: 880px) {
        .work-models {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }
      }

      .work-card {
        position: relative;
        overflow: hidden;
        padding: clamp(22px, 3vw, 32px);
        border-radius: var(--radius);
        border: 1px solid rgba(60, 190, 174, 0.2);
        background: rgba(255, 255, 255, 0.065);
        box-shadow: 0 20px 70px rgba(0, 0, 0, 0.2);
        transition: border-color 260ms ease, box-shadow 260ms ease, background 260ms ease, transform 260ms ease;
      }

      .work-card:hover,
      .work-card:focus-within {
        transform: translateY(-2px);
        border-color: rgba(60, 190, 174, 0.44);
        background: rgba(255, 255, 255, 0.085);
        box-shadow: 0 26px 84px rgba(0, 0, 0, 0.26), 0 0 34px rgba(60, 190, 174, 0.16);
      }

      .work-icon {
        display: grid;
        place-items: center;
        width: 88px;
        height: 88px;
        margin-bottom: 18px;
        border-radius: 24px;
        background: rgba(60, 190, 174, 0.1);
        box-shadow: 0 0 24px rgba(60, 190, 174, 0.18);
      }

      .work-icon img {
        width: 58px;
        height: 58px;
        object-fit: contain;
        filter: drop-shadow(0 0 16px rgba(60, 190, 174, 0.34));
      }

      .work-card h3 {
        margin: 0 0 10px;
        font-family: var(--mono);
        font-size: clamp(22px, 2.4vw, 30px);
        letter-spacing: -0.02em;
      }

      .work-card p,
      .work-card li {
        color: rgba(243, 251, 250, 0.82);
      }

      .work-card ul {
        margin: 16px 0 0;
        padding-left: 18px;
      }

      .process-hover,
      [data-process-hover] {
        display: none !important;
      }

      .process-chevron {
        background: rgba(60, 190, 174, 0.22);
        border-color: rgba(60, 190, 174, 0.4);
        color: var(--fg);
      }

      .process-chevron[data-accent="filled"] {
        background: color-mix(in srgb, var(--c-amber-orange) 78%, var(--c-white));
        color: var(--c-black);
      }

      .process-chevron[data-accent="outline"] {
        background: rgba(243, 251, 250, 0.15);
        color: var(--fg);
      }

      .process-row.is-dimmed,
      .process-chevron.is-dimmed {
        opacity: 1;
      }

      #process .section-lead:empty,
      #capabilities .section-lead:empty,
      #projects .section-lead:empty {
        display: none;
      }

      #process .section-lead {
        display: none;
      }

      #capabilities .section-lead {
        display: none;
      }

      .caps {
        background: transparent;
        border: 0;
        box-shadow: none;
      }

      .cap-frame-panel {
        padding: 0;
        border: 0;
        background: transparent;
        box-shadow: none;
      }

      .ref-projects {
        display: grid;
        gap: clamp(18px, 2.5vw, 28px);
        margin-top: 28px;
      }

      #projects .cards {
        display: none;
      }

      .ref-project {
        grid-template-columns: 1fr;
        background: rgba(255, 255, 255, 0.055);
        border-color: rgba(60, 190, 174, 0.2);
      }

      @media (min-width: 940px) {
        .ref-project {
          grid-template-columns: minmax(260px, 34%) minmax(0, 66%);
        }
      }

      .ref-media {
        background: rgba(50, 60, 64, 0.72);
        border-color: rgba(60, 190, 174, 0.22);
        cursor: zoom-in;
      }

      .ref-media picture {
        background: rgba(50, 60, 64, 0.72);
      }

      .ref-media img {
        object-fit: contain;
        padding: clamp(8px, 1vw, 12px);
        background: rgba(50, 60, 64, 0.72);
      }

      .ref-details {
        grid-template-columns: 1fr;
      }

      @media (min-width: 980px) {
        .ref-details {
          grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
        }
      }

      .ref-box {
        border-color: rgba(60, 190, 174, 0.22);
        background: rgba(60, 190, 174, 0.08);
      }

      .ref-box.ref-value {
        border-color: rgba(184, 119, 4, 0.26);
        background: rgba(184, 119, 4, 0.1);
      }

      .ref-box h3 {
        margin-bottom: 12px;
        color: var(--fg);
      }

      .ref-box h4 {
        color: color-mix(in srgb, var(--c-green-blue) 78%, var(--c-white));
      }

      .about-copy {
        max-width: none;
      }

      .person img {
        object-position: 50% 5%;
      }

      #contact .section-header h2 {
        white-space: nowrap;
      }

      .social a,
      .footer-social a {
        background: transparent;
        border-color: rgba(243, 251, 250, 0.18);
      }

      .social img,
      .footer-social img {
        filter: none;
      }

      .image-lightbox {
        position: fixed;
        inset: 0;
        z-index: 1000;
        display: grid;
        place-items: center;
        padding: clamp(18px, 4vw, 56px);
        background: rgba(7, 12, 13, 0.78);
        backdrop-filter: blur(10px);
        opacity: 0;
        pointer-events: none;
        transition: opacity 220ms ease;
      }

      .image-lightbox.is-open {
        opacity: 1;
        pointer-events: auto;
      }

      .image-lightbox img {
        max-width: min(1080px, 94vw);
        max-height: 86vh;
        object-fit: contain;
        border-radius: 22px;
        background: rgba(50, 60, 64, 0.92);
        box-shadow: 0 32px 120px rgba(0, 0, 0, 0.45);
        transform: scale(0.94);
        transition: transform 260ms ease;
      }

      .image-lightbox.is-open img {
        transform: scale(1);
      }

      .image-lightbox button {
        position: absolute;
        top: 18px;
        right: 18px;
        width: 44px;
        height: 44px;
        border: 1px solid rgba(243, 251, 250, 0.22);
        border-radius: 999px;
        color: var(--fg);
        background: rgba(255, 255, 255, 0.08);
        cursor: pointer;
        font-size: 24px;
      }

      @media (max-width: 720px) {
        .hero-title span,
        #services-title,
        #contact .section-header h2 {
          white-space: normal;
        }
      }

      /* Final layout polish */
      .section,
      #services,
      #process,
      #capabilities,
      #projects,
      #about,
      #career,
      #benefits,
      #contact {
        padding-top: clamp(62px, 6.2vw, 88px);
        padding-bottom: clamp(62px, 6.2vw, 88px);
      }

      .section-header,
      .section-header.center,
      .section-header.wide,
      .section-header.align-left {
        max-width: 100%;
        margin-inline: 0;
        margin-bottom: clamp(18px, 2.2vw, 26px);
        text-align: left;
      }

      h2,
      .benefits-heading,
      #services-title {
        font-family: var(--mono);
        font-size: clamp(28px, 2.7vw, 36px);
        line-height: 1.12;
        letter-spacing: -0.02em;
        white-space: nowrap;
      }

      .section-lead,
      #career .section-lead {
        max-width: none;
        font-family: var(--sans);
        font-size: clamp(13px, 1vw, 14px);
        line-height: 1.55;
        white-space: nowrap;
      }

      .section-lead:empty {
        display: none;
      }

      .eyebrow {
        font-size: clamp(14px, 1.05vw, 15px);
        line-height: 1.2;
      }

      .solution-intro {
        margin-bottom: clamp(36px, 4.5vw, 56px);
      }

      .services-grid,
      .work-models,
      .ref-projects,
      .people,
      .jobs,
      .benefits {
        margin-top: clamp(20px, 2.4vw, 28px);
      }

      .process-chevron[data-accent="filled"] {
        color: var(--fg);
        border-color: rgba(60, 190, 174, 0.38);
        background: rgba(243, 251, 250, 0.16);
      }

      .process-chevron[data-accent="outline"] {
        border-color: rgba(243, 251, 250, 0.28);
        background: rgba(243, 251, 250, 0.13);
      }

      .process-chevron:hover,
      .process-chevron.is-focus {
        background: rgba(243, 251, 250, 0.16);
        border-color: rgba(60, 190, 174, 0.38);
      }

      p,
      h1,
      h2,
      h3,
      h4,
      h5,
      h6,
      li,
      span,
      figcaption,
      small,
      strong,
      em {
        cursor: default;
      }

      a *,
      button *,
      .service-icon *,
      .ref-media *,
      [data-zoom-src] * {
        cursor: pointer;
      }

      #process button,
      #process button * {
        cursor: default;
      }

      @media (max-width: 1180px) {
        h2,
        .benefits-heading,
        #services-title,
        .section-lead,
        #career .section-lead {
          white-space: normal;
        }
      }

      /* Final typography and spacing pass */
      .section,
      #services,
      #how-we-work,
      #process,
      #capabilities,
      #projects,
      #about,
      #career,
      #benefits,
      #contact {
        padding-top: clamp(56px, 5.4vw, 76px);
        padding-bottom: clamp(56px, 5.4vw, 76px);
      }

      h2,
      .benefits-heading,
      #services-title {
        font-size: clamp(26px, 2.35vw, 33px);
      }

      .section-lead,
      #career .section-lead {
        font-size: clamp(13px, 0.95vw, 14px);
      }

      .solution-intro-copy,
      .about-copy p,
      .career-copy p,
      .work-card p,
      .work-card li,
      .ref-box p,
      .panel-copy p,
      .bullets,
      .job .meta,
      .contact-card .meta {
        font-size: clamp(15px, 1.05vw, 16px);
        line-height: 1.68;
      }

      #services-title {
        font-size: clamp(26px, 2.35vw, 33px);
      }

      .process-chevron[data-accent="filled"] {
        color: var(--fg);
        border-color: rgba(240, 165, 47, 0.88);
        border-width: 2px;
        background: rgba(240, 165, 47, 0.36);
      }

      .process-chevron[data-accent="filled"]:hover,
      .process-chevron[data-accent="filled"].is-focus {
        border-color: rgba(240, 165, 47, 0.88);
        background: rgba(240, 165, 47, 0.36);
      }

      .process-chevron[data-accent="outline"] {
        border-color: rgba(243, 251, 250, 0.42);
        border-width: 2px;
      }

      .process-chevron[data-accent="outline"]:hover,
      .process-chevron[data-accent="outline"].is-focus {
        border-color: rgba(243, 251, 250, 0.42);
        background: rgba(243, 251, 250, 0.13);
      }

      .service-icon {
        background: #ffffff;
        border-color: rgba(255, 255, 255, 0.82);
        box-shadow: 0 16px 34px rgba(0, 0, 0, 0.26), inset 0 0 0 1px rgba(50, 60, 64, 0.08);
      }

      .service-icon img {
        background: #ffffff;
      }

      .service-card:hover .service-icon,
      .service-card:focus-within .service-icon {
        background: #ffffff;
        border-color: #ffffff;
      }

      .contact-card .social {
        display: none;
      }

      .footer-social {
        gap: 14px;
      }

      .footer-social a {
        width: 58px;
        height: 58px;
        border-radius: 20px;
        border: 1px solid rgba(243, 251, 250, 0.18);
        background:
          linear-gradient(145deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.045)),
          rgba(255, 255, 255, 0.06);
        box-shadow: 0 20px 48px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.12);
        backdrop-filter: blur(10px);
      }

      .footer-social a:hover,
      .footer-social a:focus-visible {
        transform: translateY(-3px) scale(1.04);
        background:
          linear-gradient(145deg, rgba(60, 190, 174, 0.24), rgba(255, 255, 255, 0.06)),
          rgba(255, 255, 255, 0.08);
        border-color: rgba(60, 190, 174, 0.52);
        box-shadow: 0 24px 58px rgba(0, 0, 0, 0.38), 0 0 0 5px rgba(60, 190, 174, 0.09);
      }

      .footer-social img {
        width: 30px;
        height: 30px;
        border-radius: 9px;
      }

      .work-card .button {
        margin-top: clamp(24px, 3vw, 36px);
      }

      .work-card .button-ghost {
        color: var(--c-black);
        background: linear-gradient(135deg, var(--c-green-blue), color-mix(in srgb, var(--c-green-blue) 78%, var(--c-white)));
        border-color: rgba(60, 190, 174, 0.68);
        box-shadow: 0 14px 34px rgba(0, 0, 0, 0.26), 0 0 0 4px rgba(60, 190, 174, 0.08);
      }

      .work-card .button-ghost:hover,
      .work-card .button-ghost:focus-visible {
        color: var(--c-black);
        background: linear-gradient(135deg, color-mix(in srgb, var(--c-green-blue) 86%, var(--c-white)), var(--c-green-blue));
        border-color: rgba(243, 251, 250, 0.36);
        box-shadow: 0 18px 42px rgba(0, 0, 0, 0.32), 0 0 0 6px rgba(60, 190, 174, 0.12);
      }

      .site-nav a.is-active,
      .site-nav a.nav-cta.is-active {
        color: var(--fg);
        background: rgba(255, 255, 255, 0.08);
        border: 1px solid rgba(243, 251, 250, 0.14);
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.035), 0 10px 26px rgba(0, 0, 0, 0.14);
        backdrop-filter: blur(8px);
      }

      .work-card .button-ghost {
        color: var(--fg);
        background: rgba(255, 255, 255, 0.055);
        border-color: rgba(60, 190, 174, 0.42);
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.045), 0 12px 28px rgba(0, 0, 0, 0.18);
      }

      .work-card .button-ghost:hover,
      .work-card .button-ghost:focus-visible {
        color: var(--fg);
        background: rgba(60, 190, 174, 0.13);
        border-color: rgba(60, 190, 174, 0.58);
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.055), 0 16px 34px rgba(0, 0, 0, 0.24);
      }

      .footer-social a[aria-label="GitHub"] {
        background:
          linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(235, 239, 242, 0.92)),
          #ffffff;
        border-color: rgba(255, 255, 255, 0.72);
      }

      .footer-social a[aria-label="LinkedIn"] {
        background:
          linear-gradient(145deg, rgba(255, 255, 255, 0.18), rgba(10, 102, 194, 0.22)),
          #0a66c2;
        border-color: rgba(112, 181, 249, 0.42);
      }

      .footer-social a[aria-label="GitHub"]:hover,
      .footer-social a[aria-label="GitHub"]:focus-visible {
        background:
          linear-gradient(145deg, #ffffff, rgba(226, 232, 236, 0.96)),
          #ffffff;
        border-color: rgba(60, 190, 174, 0.42);
      }

      .footer-social a[aria-label="LinkedIn"]:hover,
      .footer-social a[aria-label="LinkedIn"]:focus-visible {
        background:
          linear-gradient(145deg, rgba(255, 255, 255, 0.22), rgba(10, 102, 194, 0.24)),
          #0b75d1;
        border-color: rgba(112, 181, 249, 0.62);
      }

      .footer-social a[aria-label="GitHub"] img,
      .footer-social a[aria-label="LinkedIn"] img {
        filter: none;
      }

      @media (prefers-reduced-motion: no-preference) {
        .hero-img {
          animation: heroBackgroundDrift 18s ease-in-out infinite alternate;
          transform-origin: 50% 45%;
          will-change: transform, filter;
        }

        @keyframes heroBackgroundDrift {
          0% {
            transform: scale(1.05) translate3d(0, 0, 0);
            filter: saturate(0.92) contrast(1.02) brightness(0.98);
          }
          100% {
            transform: scale(1.09) translate3d(-1.2%, -0.8%, 0);
            filter: saturate(1.02) contrast(1.05) brightness(1.03);
          }
        }
      }

      .benefits {
        display: grid;
        grid-template-columns: repeat(7, minmax(0, 1fr));
        align-items: end;
        justify-items: center;
        gap: 0;
      }

      #benefits .container {
        width: min(1320px, calc(100% - 2 * var(--gutter)));
      }

      .benefit {
        display: grid;
        grid-template-rows: 92px minmax(28px, auto);
        justify-items: center;
        min-width: 0;
        width: 100%;
        min-height: 0;
        height: auto;
        padding: 0 4px;
        gap: 4px;
        border: 0;
        background: transparent;
        box-shadow: none;
        align-content: end;
      }

      .benefit:hover,
      .benefit:focus {
        background: transparent;
        border-color: transparent;
      }

      .benefit-icon {
        width: 106px;
        height: 58px;
        max-width: none;
        position: absolute;
        bottom: 32px;
        left: 50%;
        transform: translateX(-50%);
      }

      .benefit-icon--flex {
        width: 280px;
        height: 80px;
      }

      .benefit-icon--meal {
        width: 150px;
        height: 82px;
      }

      .benefit-icon--collab {
        width: 106px;
        height: 58px;
        bottom: 42px;
      }

      .benefit > span:not(.benefit-icon):not(.benefit-tooltip) {
        min-height: 0;
        width: 100%;
        max-width: 112px;
        white-space: normal;
        line-height: 1.12;
        text-align: center;
        align-self: start;
        grid-row: 2;
        text-wrap: balance;
      }