/* ===== Home page =====
         Everything below is new; base styles come from /styles.css. */

      /* Fallback faces sized to match Urbanist and DM Sans (measured from the font files), so text
         does not re-wrap and shift the layout when the web fonts arrive */
      @font-face {
        font-family: "Urbanist Fallback";
        src: local("Arial Bold"), local("Arial-BoldMT"), local("Helvetica Bold"), local("Roboto Bold");
        font-weight: 700 900;
        size-adjust: 96.21%;
        ascent-override: 98.75%;
        descent-override: 25.99%;
        line-gap-override: 0.00%;
      }
      @font-face {
        font-family: "Urbanist Fallback";
        src: local("Arial"), local("ArialMT"), local("Helvetica"), local("Roboto");
        font-weight: 400 600;
        size-adjust: 100.21%;
        ascent-override: 94.80%;
        descent-override: 24.95%;
        line-gap-override: 0.00%;
      }
      @font-face {
        font-family: "DM Sans Fallback";
        src: local("Arial"), local("ArialMT"), local("Helvetica"), local("Roboto");
        font-weight: 400 500;
        size-adjust: 104.21%;
        ascent-override: 95.19%;
        descent-override: 29.75%;
        line-gap-override: 0.00%;
      }
      :root {
        --font-heading: "Urbanist", "Urbanist Fallback", sans-serif;
        --font-body: "DM Sans", "DM Sans Fallback", sans-serif;
      }
      :root {
        --ink: #0b1224;
        --fdm: #60a5fa;
        --sla: #2dd4bf;
        --sls: #fbbf24;
        --metal: #a78bfa;
        --cad: #f472b6;
        --scan: #34d399;
        --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
        --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
        --mono: ui-monospace, "SFMono-Regular", "Cascadia Mono", "Segoe UI Mono", Consolas, monospace;
      }
      .sr-only {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        clip-path: inset(50%);
        white-space: nowrap;
      }

      /* ---------- Hero shell (shared by the three concepts) ---------- */
      .hx {
        position: relative;
        isolation: isolate;
        overflow: hidden;
        color: #fff;
        background:
          radial-gradient(55% 80% at 88% -10%, rgba(37, 99, 235, 0.42) 0%, transparent 62%),
          radial-gradient(42% 60% at -5% 105%, rgba(16, 185, 129, 0.13) 0%, transparent 60%),
          var(--ink);
      }
      .hx::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        pointer-events: none;
        background-image:
          linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
          linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
        background-size: 56px 56px;
        -webkit-mask-image: linear-gradient(180deg, #000, transparent 80%);
        mask-image: linear-gradient(180deg, #000, transparent 80%);
      }
      .hx[data-hero="c"]::before {
        display: none;
      }
      .hx-v {
        display: none;
      }
      .hx[data-hero="a"] .hx-a,
      .hx[data-hero="b"] .hx-b,
      .hx[data-hero="c"] .hx-c {
        display: block;
      }
      .container.hx-wrap {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: clamp(2rem, 4.5vw, 4.75rem);
        align-items: center;
        min-height: 100svh;
        padding-top: calc(90px + 2.25rem);
        padding-bottom: 3rem;
      }
      .hx-eyebrow {
        display: inline-flex;
        align-items: center;
        gap: 0.55rem;
        padding: 0.42rem 0.85rem 0.42rem 0.55rem;
        border-radius: 999px;
        border: 1px solid rgba(147, 197, 253, 0.22);
        background: rgba(147, 197, 253, 0.07);
        color: #bfdbfe;
        font: 600 0.76rem/1 var(--font-heading);
        letter-spacing: 0.12em;
        text-transform: uppercase;
      }
      .hx-flag {
        width: 20px;
        height: 14px;
        border-radius: 2px;
        background: url("/images/flag-square-250.png") center / cover no-repeat;
      }
      .hx-h1 {
        color: #fff;
        font-size: clamp(2.3rem, 4.3vw, 3.75rem);
        font-weight: 800;
        line-height: 1.05;
        letter-spacing: -0.022em;
        margin: 1.15rem 0;
      }
      .hx-h1 .hl,
      .hx-h1 .hlw {
        background: linear-gradient(120deg, #bfdbfe 0%, #60a5fa 50%, #3b82f6 100%);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        padding-bottom: 0.15em;
        margin-bottom: -0.15em;
      }
      .hx-lead {
        color: #cbd5e1;
        font-size: clamp(1.04rem, 1.2vw, 1.18rem);
        max-width: 35rem;
      }
      .hx-cta {
        display: flex;
        flex-wrap: wrap;
        gap: 0.75rem;
        margin: 1.8rem 0 1.5rem;
      }
      .hx-feats {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem 1.35rem;
        list-style: none;
        color: #cbd5e1;
        font-size: 0.95rem;
      }
      .hx-feats li {
        display: inline-flex;
        align-items: center;
        gap: 0.45rem;
      }
      .hx-feats svg {
        width: 18px;
        height: 18px;
        color: var(--color-accent-light);
        flex: none;
      }
      /* Entrance: words of the heading rise out of a mask, the rest fades up after */
      .sw {
        display: inline-block;
        overflow: hidden;
        vertical-align: top;
        padding-bottom: 0.22em;
        margin-bottom: -0.22em;
      }
      .sw > span {
        display: inline-block;
        transform: translateY(108%);
        animation: sw-up 0.95s var(--ease-out) forwards;
        animation-delay: calc(0.08s + var(--i) * 60ms);
      }
      @keyframes sw-up {
        to {
          transform: none;
        }
      }
      .hx-rise > * {
        animation: hx-rise 0.9s var(--ease-out) both;
      }
      .hx-rise > :nth-child(1) { animation-delay: 0.02s; }
      .hx-rise > :nth-child(2) { animation: none; }
      .hx-rise > :nth-child(3) { animation-delay: 0.45s; }
      .hx-rise > :nth-child(4) { animation-delay: 0.55s; }
      .hx-rise > :nth-child(5) { animation-delay: 0.65s; }
      .hx-rise > :nth-child(6) { animation-delay: 0.75s; }
      @keyframes hx-rise {
        from {
          opacity: 0;
          transform: translateY(16px);
        }
        to {
          opacity: 1;
          transform: none;
        }
      }
      .hx-pop {
        animation: hx-pop 1.1s var(--ease-out) 0.25s both;
      }
      @keyframes hx-pop {
        from {
          opacity: 0;
          transform: translateY(26px) scale(0.97);
        }
        to {
          opacity: 1;
          transform: none;
        }
      }

      /* ---------- Shared "print" reveal: an image builds bottom-up, layer by layer ---------- */
      .rv {
        position: absolute;
        inset: 0;
        pointer-events: none;
        --hx: 50%;
      }
      .rv__img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        clip-path: inset(var(--y, 0%) 0 0 0);
      }
      .rv__tex {
        position: absolute;
        inset: 0;
        clip-path: inset(var(--y, 0%) 0 0 0);
        opacity: 0;
        transition: opacity 0.9s ease;
        mix-blend-mode: overlay;
        background: repeating-linear-gradient(
          180deg,
          rgba(255, 255, 255, 0.16) 0 1px,
          rgba(0, 0, 0, 0.14) 1px 2px,
          transparent 2px 4px
        );
      }
      /* Moving parts ride full-size layers shifted with transforms, so the motion causes no layout shift.
         Percentages in translate() are of the layer itself, which is the size of the stage. */
      .rv__front,
      .rv__hot,
      .rv__track {
        position: absolute;
        inset: 0;
        opacity: 0;
        transition: opacity 0.3s;
        will-change: transform;
      }
      .rv__front,
      .rv__hot {
        transform: translateY(var(--y, 0%));
      }
      .rv__track {
        transform: translate(var(--hx), var(--y, 0%));
      }
      .rv__front::before {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: -1px;
        height: 2px;
        background:
          radial-gradient(70px 4px at var(--hx) 50%, #fff, transparent),
          linear-gradient(90deg, transparent, var(--c) 8%, var(--c) 92%, transparent);
        box-shadow: 0 0 12px 1px var(--c);
      }
      .rv__hot {
        mix-blend-mode: screen;
      }
      .rv__hot::before {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        height: 10%;
        background: linear-gradient(180deg, color-mix(in srgb, var(--c) 60%, transparent), transparent);
      }
      .rv__head {
        position: absolute;
        left: 0;
        top: 0;
        transform: translate(-50%, -100%);
      }
      .rv.is-building .rv__tex,
      .rv.is-building .rv__front,
      .rv.is-building .rv__track {
        opacity: 1;
      }
      .rv.is-building .rv__hot {
        opacity: 0.85;
      }
      .rv__nozzle {
        display: none;
        width: 38px;
        height: 53px;
        overflow: visible;
        filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.55));
      }
      .rv__bead {
        fill: #fff;
        filter: drop-shadow(0 0 3px var(--c)) drop-shadow(0 0 7px var(--c));
      }
      .rv__laser {
        display: none;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: #fff;
        transform: translateY(50%);
        box-shadow:
          0 0 6px 2px #fff,
          0 0 16px 5px var(--c),
          0 0 38px 12px color-mix(in srgb, var(--c) 45%, transparent);
      }
      .rv[data-tech="fdm"] .rv__nozzle,
      .rv[data-tech="sla"] .rv__laser {
        display: block;
      }

      .lb__laser i {
        position: absolute;
        left: 0;
        right: 0;
        height: 2px;
        background: var(--scan);
        box-shadow: 0 0 8px var(--scan), 0 0 22px var(--scan);
      }
      .lb__laser i:nth-child(1) { top: -12px; opacity: 0.55; }
      .lb__laser i:nth-child(2) { top: -1px; opacity: 0.8; }
      .lb__laser i:nth-child(3) { top: 10px; }

      /* ---------- Hero A: live build ---------- */
      .lb {
        --c: var(--fdm);
        position: relative;
        margin: 0;
        padding: 10px;
        border-radius: 22px;
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.025));
        border: 1px solid rgba(255, 255, 255, 0.11);
        box-shadow: 0 50px 90px -45px rgba(0, 0, 0, 0.9);
      }
      .lb::after {
        content: "";
        position: absolute;
        left: 12%;
        right: 12%;
        bottom: -26px;
        height: 70px;
        z-index: -1;
        background: radial-gradient(closest-side, var(--c), transparent);
        opacity: 0.35;
        filter: blur(22px);
      }
      .lb__stage {
        position: relative;
        aspect-ratio: 4 / 3;
        border-radius: 14px;
        overflow: hidden;
        background: var(--ink);
      }
      .lb__stage > img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
      .lb__grid {
        position: absolute;
        inset: 0;
        pointer-events: none;
        background-image:
          linear-gradient(rgba(147, 197, 253, 0.09) 1px, transparent 1px),
          linear-gradient(90deg, rgba(147, 197, 253, 0.09) 1px, transparent 1px);
        background-size: 28px 28px;
        clip-path: inset(0 0 calc(100% - var(--y, 0%)) 0);
      }
      .lb__out {
        opacity: 0;
      }
      /* Scan projects: the original is wiped away by the second laser pass, leaving its digital twin */
      .lb__orig {
        opacity: 0;
        clip-path: inset(0 0 var(--ob, 0%) 0);
      }
      .lb.has-scan .lb__orig {
        opacity: 1;
      }
      .lb.has-scan .lb__pts {
        background: url("/images/home/scan-points.png") 0 0 / 120px 120px;
      }
      .lb__pts {
        position: absolute;
        inset: 0;
        pointer-events: none;
        mix-blend-mode: screen;
        clip-path: inset(0 0 calc(100% - var(--pc, 0%)) 0);
        opacity: var(--po, 0);
      }
      .lb__laser {
        position: absolute;
        inset: 0;
        transform: translateY(var(--sy, 0%));
        will-change: transform;
        pointer-events: none;
        opacity: 0;
        transition: opacity 0.25s;
      }
      .lb.is-scanning .lb__laser {
        opacity: 1;
      }
      .lb__sheen {
        position: absolute;
        inset: 0;
        pointer-events: none;
        transform: translateX(-130%);
        background: linear-gradient(
          105deg,
          transparent 30%,
          rgba(255, 255, 255, 0.28) 48%,
          rgba(255, 255, 255, 0.05) 56%,
          transparent 70%
        );
      }
      .lb.is-done .lb__sheen {
        animation: lb-sheen 1.2s var(--ease) forwards;
      }
      @keyframes lb-sheen {
        to {
          transform: translateX(130%);
        }
      }
      .lb__hud {
        position: absolute;
        top: 12px;
        left: 12px;
        right: 12px;
        display: flex;
        justify-content: space-between;
        gap: 0.5rem;
        pointer-events: none;
      }
      .lb__pill {
        display: inline-flex;
        align-items: center;
        gap: 0.45rem;
        padding: 0.38rem 0.62rem;
        border-radius: 999px;
        background: rgba(11, 18, 36, 0.74);
        -webkit-backdrop-filter: blur(8px);
        backdrop-filter: blur(8px);
        border: 1px solid rgba(255, 255, 255, 0.13);
        color: #e2e8f0;
        font: 600 0.68rem/1 var(--mono);
        letter-spacing: 0.07em;
        text-transform: uppercase;
        font-variant-numeric: tabular-nums;
        white-space: nowrap;
      }
      .lb__pill i {
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: var(--c);
        box-shadow: 0 0 8px var(--c);
        flex: none;
      }
      .lb__pill b {
        color: #fff;
      }
      .lb__status {
        position: absolute;
        left: 12px;
        bottom: 14px;
      }
      .lb__status.is-done i {
        background: var(--color-accent-light);
        box-shadow: 0 0 8px var(--color-accent-light);
      }
      .lb__bar {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 3px;
        background: rgba(255, 255, 255, 0.1);
      }
      .lb__bar i {
        display: block;
        height: 100%;
        width: var(--pct, 0%);
        background: var(--c);
        box-shadow: 0 0 10px var(--c);
      }
      .lb__cap {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        padding: 0.85rem 0.45rem 0.3rem 0.4rem;
        min-height: 4.3rem;
      }
      .lb__items {
        min-width: 0;
        margin: 0;
        padding: 0;
        list-style: none;
        transition: opacity 0.35s, transform 0.35s var(--ease);
      }
      .lb__items.is-swap {
        opacity: 0;
        transform: translateY(6px);
      }
      /* Only the current project shows; the others stay in the page for crawlers and screen readers */
      .lb__item:not(.is-on) {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
      }
      .lb__item a {
        display: block;
        color: inherit;
      }
      .lb__title {
        display: block;
        color: #fff;
        font: 700 1.02rem/1.3 var(--font-heading);
      }
      .lb__more {
        display: inline-block;
        margin-top: 0.2rem;
        color: #93c5fd;
        font-size: 0.85rem;
        font-weight: 500;
        text-decoration: underline;
        text-underline-offset: 3px;
        text-decoration-color: rgba(147, 197, 253, 0.4);
      }
      .lb__item a:hover .lb__more,
      .lb__item a:focus-visible .lb__more {
        color: #fff;
      }
      .lb__nav {
        display: flex;
        align-items: center;
        flex: none;
      }
      .lb__dot {
        width: 24px;
        height: 24px;
        display: grid;
        place-items: center;
        transition: width 0.4s var(--ease);
      }
      .lb__dot::before {
        content: "";
        width: 7px;
        height: 7px;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.28);
        transition: width 0.4s var(--ease), background 0.3s;
      }
      .lb__dot[aria-current="true"] {
        width: 38px;
      }
      .lb__dot[aria-current="true"]::before {
        width: 26px;
        background: linear-gradient(90deg, var(--c) var(--dp, 0%), rgba(255, 255, 255, 0.16) 0);
      }
      .lb__pause {
        width: 34px;
        height: 34px;
        margin-left: 0.4rem;
        border-radius: 50%;
        border: 1px solid rgba(255, 255, 255, 0.22);
        color: #e2e8f0;
        display: grid;
        place-items: center;
        transition: background 0.2s, border-color 0.2s;
      }
      .lb__pause:hover {
        background: rgba(255, 255, 255, 0.08);
        border-color: rgba(255, 255, 255, 0.4);
      }
      .lb__pause[hidden] {
        display: none;
      }
      .lb__pause svg {
        width: 14px;
        height: 14px;
      }
      .lb__pause .i-play,
      .lb__pause[aria-pressed="true"] .i-pause {
        display: none;
      }
      .lb__pause[aria-pressed="true"] .i-play {
        display: block;
      }

      /* ---------- Services: live process cards ---------- */
      .svx {
        position: relative;
        padding: 6rem 0;
        background: var(--color-background-alt);
      }
      .sv-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 1.5rem;
      }
      .sv {
        display: flex;
        flex-direction: column;
        border-radius: 18px;
        background: #fff;
        border: 1px solid var(--color-border);
        overflow: hidden;
        box-shadow: var(--shadow-sm);
        transition: transform 0.45s var(--ease), box-shadow 0.45s var(--ease), border-color 0.3s;
      }
      .sv:hover {
        transform: translateY(-6px);
        box-shadow: 0 30px 50px -25px rgba(15, 23, 42, 0.35);
        border-color: transparent;
      }
      .sv__view {
        position: relative;
        aspect-ratio: 16 / 9;
        overflow: hidden;
        background: radial-gradient(120% 100% at 50% 0%, #142449 0%, var(--ink) 70%);
      }
      .sv__view::before {
        content: "";
        position: absolute;
        inset: 0;
        background-image:
          linear-gradient(rgba(148, 163, 184, 0.07) 1px, transparent 1px),
          linear-gradient(90deg, rgba(148, 163, 184, 0.07) 1px, transparent 1px);
        background-size: 20px 20px;
      }
      .sv__view::after {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        background: radial-gradient(60% 55% at 50% 100%, color-mix(in srgb, var(--c) 20%, transparent), transparent 70%);
      }
      .sv__view canvas {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
      }
      .sv__tag,
      .sv__how {
        position: absolute;
        z-index: 1;
        font: 600 0.64rem/1 var(--mono);
        letter-spacing: 0.08em;
        text-transform: uppercase;
      }
      .sv__tag {
        top: 10px;
        left: 10px;
        display: inline-flex;
        align-items: center;
        gap: 0.4rem;
        padding: 0.32rem 0.55rem;
        border-radius: 999px;
        background: rgba(11, 18, 36, 0.7);
        border: 1px solid rgba(255, 255, 255, 0.12);
        color: #e2e8f0;
      }
      .sv__tag i {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--c);
        box-shadow: 0 0 6px var(--c);
      }
      .sv__how {
        left: 12px;
        bottom: 10px;
        color: #94a3b8;
        letter-spacing: 0.04em;
        text-transform: none;
        font-weight: 500;
      }
      .sv__body {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        flex: 1;
        padding: 1.35rem 1.4rem 1.5rem;
      }
      .sv__body h3 {
        font-size: 1.2rem;
      }
      .sv__body p {
        font-size: 0.95rem;
      }
      .sv__more {
        margin-top: auto;
        padding-top: 0.4rem;
        display: inline-flex;
        align-items: center;
        gap: 0.4rem;
        font: 700 0.92rem var(--font-heading);
        color: var(--color-primary);
      }
      .sv__more svg {
        width: 16px;
        height: 16px;
        transition: transform 0.3s var(--ease);
      }
      .sv:hover .sv__more svg {
        transform: translateX(4px);
      }

      /* ---------- How it works: scroll-linked rail + animated step icons ---------- */
      .prx {
        position: relative;
      }
      .prx .process__steps::before {
        display: none;
      }
      .pr-rail {
        position: absolute;
        top: 50px;
        left: 12.5%;
        right: 12.5%;
        height: 2px;
        border-radius: 2px;
        background: rgba(148, 163, 184, 0.18);
      }
      .pr-rail i {
        position: absolute;
        inset: 0;
        transform-origin: left;
        transform: scaleX(var(--prog, 0));
        background: linear-gradient(90deg, #3b82f6, #10b981);
        box-shadow: 0 0 12px rgba(59, 130, 246, 0.6);
      }
      .prx .process-step__number {
        background: rgba(15, 23, 42, 0.95);
        border-color: rgba(148, 163, 184, 0.3);
        color: #64748b;
        transition: border-color 0.5s, background 0.5s, box-shadow 0.5s, color 0.5s, transform 0.5s var(--ease);
      }
      .prx .process-step.is-on .process-step__number {
        border-color: #60a5fa;
        color: #fff;
        background: radial-gradient(circle at 50% 30%, rgba(37, 99, 235, 0.4), rgba(15, 23, 42, 0.95));
        box-shadow: 0 0 0 6px rgba(37, 99, 235, 0.12), 0 0 30px rgba(59, 130, 246, 0.45);
      }
      .prx .process-step:hover .process-step__number {
        transform: none;
      }
      .pr-ico {
        width: 46px;
        height: 46px;
        overflow: visible;
      }
      .pr-n {
        position: absolute;
        top: -2px;
        right: -2px;
        width: 28px;
        height: 28px;
        border-radius: 50%;
        display: grid;
        place-items: center;
        background: #1e293b;
        border: 2px solid currentColor;
        color: inherit;
        font: 800 0.8rem/1 var(--font-heading);
      }
      .is-on .pr-up__a { animation: pr-up 1.6s var(--ease) infinite; }
      @keyframes pr-up {
        0% { transform: translateY(7px); opacity: 0; }
        30%, 70% { opacity: 1; }
        100% { transform: translateY(-7px); opacity: 0; }
      }
      .pr-cfg circle { transform-box: fill-box; }
      .is-on .pr-cfg .k1 { animation: pr-k 2.4s var(--ease) infinite; }
      .is-on .pr-cfg .k2 { animation: pr-k 2.4s var(--ease) -0.8s infinite reverse; }
      .is-on .pr-cfg .k3 { animation: pr-k 2.4s var(--ease) -1.6s infinite; }
      @keyframes pr-k {
        0%, 100% { transform: translateX(0); }
        50% { transform: translateX(12px); }
      }
      .pr-prt rect { transform-box: fill-box; transform-origin: left; }
      .is-on .pr-prt .l1 { animation: pr-l 2.4s var(--ease) infinite; }
      .is-on .pr-prt .l2 { animation: pr-l 2.4s var(--ease) 0.3s infinite; }
      .is-on .pr-prt .l3 { animation: pr-l 2.4s var(--ease) 0.6s infinite; }
      @keyframes pr-l {
        0% { transform: scaleX(0); opacity: 1; }
        25%, 80% { transform: scaleX(1); opacity: 1; }
        100% { transform: scaleX(1); opacity: 0; }
      }
      .is-on .pr-dlv__box { animation: pr-bob 1.2s ease-in-out infinite; }
      .is-on .pr-dlv__s { stroke-dasharray: 6 4; animation: pr-dash 0.6s linear infinite; }
      @keyframes pr-bob {
        50% { transform: translateY(-2px); }
      }
      @keyframes pr-dash {
        to { stroke-dashoffset: 10; }
      }

      /* ---------- Stats: odometer digits ---------- */
      .stats {
        position: relative;
      }
      .od {
        display: inline-flex;
        align-items: flex-start;
      }
      .od__col {
        display: inline-block;
        height: 1em;
        overflow: hidden;
      }
      .od__strip {
        display: flex;
        flex-direction: column;
        transition: transform 2.2s var(--ease-out);
        transition-delay: calc(var(--i) * 110ms);
      }
      .od__strip span {
        display: block;
        height: 1em;
        line-height: 1;
        text-align: center;
      }

      /* ---------- Why us: delivery map ---------- */
      .why-us {
        position: relative;
      }
      @property --mr {
        syntax: "<percentage>";
        inherits: false;
        initial-value: 0%;
      }
      .mp {
        position: relative;
        margin: 0;
        padding: 1.25rem 1.25rem 1.15rem;
        border-radius: 24px;
        background: radial-gradient(80% 60% at 8% 78%, rgba(37, 99, 235, 0.07), transparent 60%), #f8fafc;
        border: 1px solid var(--color-border);
        box-shadow: var(--shadow-lg);
      }
      .mp__map {
        position: relative;
      }
      .mp__land {
        display: block;
        width: 100%;
        height: auto;
        -webkit-mask-image: radial-gradient(circle at 7.7% 75.6%, #000 var(--mr), transparent calc(var(--mr) + 14%));
        mask-image: radial-gradient(circle at 7.7% 75.6%, #000 var(--mr), transparent calc(var(--mr) + 14%));
        transition: --mr 2.4s var(--ease);
      }
      .mp.is-on .mp__land {
        --mr: 150%;
      }
      .mp__svg {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        overflow: visible;
      }
      .mp__arc {
        fill: none;
        stroke: url(#mpg);
        stroke-width: 2.8;
        stroke-linecap: round;
        stroke-dasharray: 1;
        stroke-dashoffset: 1;
        transition:
          stroke-dashoffset 1.2s var(--ease-out) calc(0.7s + var(--i) * 0.14s),
          stroke-width 0.25s,
          opacity 0.25s;
      }
      .mp.is-on .mp__arc {
        stroke-dashoffset: 0;
      }
      .mp.has-hot .mp__arc {
        opacity: 0.22;
      }
      .mp.has-hot .mp__arc.is-hot {
        opacity: 1;
        stroke-width: 5;
      }
      .mp__city {
        fill: #fff;
        stroke: var(--color-primary);
        stroke-width: 3.5;
        transform-box: fill-box;
        transform-origin: center;
        transform: scale(0);
        transition: transform 0.5s cubic-bezier(0.3, 1.6, 0.5, 1) calc(1.6s + var(--i) * 0.14s), fill 0.2s;
      }
      .mp.is-on .mp__city {
        transform: scale(1);
      }
      .mp__city.is-hot {
        fill: var(--color-primary);
      }
      .mp__pin {
        fill: var(--color-canada);
        stroke: #fff;
        stroke-width: 4;
      }
      .mp__ring {
        fill: none;
        stroke: var(--color-canada);
        stroke-width: 2.5;
        transform-box: fill-box;
        transform-origin: center;
        opacity: 0;
        animation: mp-ring 2.6s var(--ease-out) infinite;
      }
      .mp__ring + .mp__ring {
        animation-delay: 1.3s;
      }
      @keyframes mp-ring {
        0% { transform: scale(0.6); opacity: 0.7; }
        100% { transform: scale(3.4); opacity: 0; }
      }
      .mp__pkt {
        fill: var(--color-primary);
        filter: drop-shadow(0 0 4px rgba(37, 99, 235, 0.8));
      }
      .mp__lab {
        position: absolute;
        transform: translate(-50%, calc(-100% - 14px));
        padding: 0.28rem 0.5rem;
        border-radius: 8px;
        background: #fff;
        border: 1px solid var(--color-border);
        box-shadow: var(--shadow-md);
        color: #0f172a;
        font: 700 0.76rem/1.15 var(--font-heading);
        white-space: nowrap;
        pointer-events: none;
        opacity: 0;
        transition: opacity 0.5s calc(1.8s + var(--i, 0) * 0.14s);
      }
      .mp__lab--below {
        transform: translate(-50%, 14px);
      }
      .mp.is-on .mp__lab {
        opacity: 1;
      }
      .mp__lab small {
        display: block;
        font: 500 0.66rem/1.2 var(--font-body);
        color: #93c5fd;
      }
      .mp__lab--origin {
        transform: translate(-16%, 20px);
        background: #0f172a;
        border-color: #0f172a;
        color: #fff;
        transition-delay: 0.3s;
      }
      .mp__cap {
        margin-top: 0.85rem;
      }
      .mp__cap p {
        font-size: 0.92rem;
        color: #475569;
      }
      .mp__cap p b {
        color: #0f172a;
      }
      .mp__list {
        list-style: none;
        display: flex;
        flex-wrap: wrap;
        gap: 0.4rem;
        margin-top: 0.75rem;
      }
      .mp__list a {
        display: inline-flex;
        align-items: baseline;
        gap: 0.35rem;
        padding: 0.35rem 0.65rem;
        border-radius: 999px;
        background: #fff;
        border: 1px solid var(--color-border);
        color: #0f172a;
        font: 600 0.8rem var(--font-heading);
        transition: border-color 0.2s, background 0.2s, color 0.2s;
      }
      .mp__list a:hover,
      .mp__list a:focus-visible {
        border-color: var(--color-primary);
        background: #eff6ff;
        color: var(--color-primary-dark);
      }
      .mp__list small {
        font: 500 0.72rem var(--font-body);
        color: #64748b;
      }

      /* ---------- Reviews ---------- */
      .rvw {
        max-width: 820px;
        margin: 0 auto;
        padding: 2rem 2.25rem;
        border-radius: 20px;
        background: #fff;
        border: 1px solid var(--color-border);
        box-shadow: var(--shadow-md);
      }
      .rvw__stars {
        color: #f59e0b;
        font-size: 1.15rem;
        letter-spacing: 2px;
      }
      .rvw__quote {
        margin: 0.8rem 0 1.1rem;
      }
      .rvw__quote p {
        color: var(--color-text);
        font-size: 1.06rem;
        line-height: 1.7;
      }
      .rvw__by {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: 0.5rem 1rem;
        font-size: 0.92rem;
        color: var(--color-text-light);
      }
      .rvw__by b {
        color: var(--color-secondary);
      }
      .rvw__by a {
        color: var(--color-primary-dark);
        font-weight: 600;
        text-decoration: underline;
        text-underline-offset: 3px;
      }

      /* ---------- CTA: slow layer-line texture ---------- */
      .ctx {
        isolation: isolate;
      }
      .ctx__lines {
        position: absolute;
        inset: 0;
        z-index: 0;
        overflow: hidden;
        pointer-events: none;
        -webkit-mask-image: radial-gradient(70% 90% at 50% 50%, #000 20%, transparent 75%);
        mask-image: radial-gradient(70% 90% at 50% 50%, #000 20%, transparent 75%);
      }
      .ctx__lines::before {
        content: "";
        position: absolute;
        inset: -40px 0;
        background: repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.075) 0 1px, transparent 1px 8px);
        animation: ct-drift 6s linear infinite;
      }
      .ctx__lines::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.12) 50%, transparent 70%);
        transform: translateX(-100%);
        animation: ct-sheen 8s var(--ease) infinite;
      }
      @keyframes ct-drift {
        to { transform: translateY(-40px); }
      }
      @keyframes ct-sheen {
        0%, 55% { transform: translateX(-100%); }
        100% { transform: translateX(100%); }
      }

      /* ---------- Responsive ---------- */
      @media (max-width: 1024px) {
        .container.hx-wrap,
        .container.mf__inner {
          grid-template-columns: minmax(0, 1fr);
          min-height: 0;
          padding-top: calc(90px + 2rem);
          padding-bottom: 3rem;
        }
        .container.tw {
          grid-template-areas: "intro" "stage" "paths" "cta";
        }
        .tw__stage {
          margin-top: 1.75rem;
        }
        .lb,
        .tw__stage {
          width: 100%;
          max-width: 640px;
        }
        /* Stacked: title and subheading, then the animation, then the buttons and the rest.
           The text block dissolves into the grid so the card can sit between its children. */
        .hx-a .container.hx-wrap {
          row-gap: 0;
        }
        .hx-a .hx-text {
          display: contents;
        }
        .hx-a .hx-eyebrow {
          order: 1;
          justify-self: start;
        }
        .hx-a .hx-h1 {
          order: 2;
        }
        .hx-a .hx-lead {
          order: 3;
        }
        .hx-a .lb {
          order: 4;
          margin-top: 1.75rem;
          animation-delay: 0.5s;
        }
        .hx-a .hx-cta {
          order: 5;
        }
        .hx-a .hx-feats {
          order: 6;
        }
        .container.mf__inner {
          min-height: 100svh;
          padding-bottom: 1.5rem;
        }
        .mf__side {
          justify-items: start;
        }
        .mf__shade {
          background:
            linear-gradient(180deg, rgba(11, 18, 36, 0.7) 0%, rgba(11, 18, 36, 0.86) 50%, rgba(11, 18, 36, 0.95) 100%);
        }
        .sv-grid {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }
        .pr-rail {
          display: none;
        }
      }
      @media (max-width: 640px) {
        .hx-h1 {
          font-size: clamp(2.05rem, 9.5vw, 2.6rem);
        }
        .hx-feats {
          font-size: 0.88rem;
        }
        .lb__pill,
        .tw__steps li {
          font-size: 0.58rem;
          padding: 0.3rem 0.45rem;
        }
        .tw__steps li b {
          display: none;
        }
        .lb__title {
          font-size: 0.95rem;
        }
        .lb__cap {
          flex-direction: column;
          align-items: flex-start;
          gap: 0.5rem;
          min-height: 6.6rem;
        }
        .lb__nav {
          margin-left: -6px;
        }
        .tw__path {
          grid-template-columns: 38px 1fr;
          padding: 0.7rem 0.8rem;
        }
        .tw__ico {
          width: 38px;
          height: 38px;
        }
        .tw-quote {
          inset: 15% 6% auto;
          padding: 0.7rem;
          gap: 0.35rem;
        }
        .tw-quote__h {
          font-size: 0.88rem;
        }
        .tw-row {
          grid-template-columns: 30px 1fr auto;
          gap: 0.5rem;
          padding: 0.28rem 0.4rem;
        }
        .tw-row img {
          width: 30px;
          height: 30px;
        }
        .tw-row b {
          font-size: 0.7rem;
        }
        .tw-row span {
          font-size: 0.66rem;
        }
        .tw-quote__f {
          font-size: 0.7rem;
          padding-top: 0.4rem;
        }
        .tw-quote__btn {
          padding: 0.45rem;
          font-size: 0.76rem;
        }
        .tw-file {
          font-size: 0.66rem;
        }
        .mk__long {
          display: none;
        }
        .sv-grid {
          grid-template-columns: minmax(0, 1fr);
        }
        .mk {
          left: 8px;
          right: 8px;
          bottom: 8px;
          max-width: none;
          justify-content: center;
          font-size: 0.72rem;
        }
        .mk__label,
        .mk__sep {
          display: none;
        }
        .mk button {
          padding: 0.45rem 0.55rem;
        }
      }

      /* ---------- Reduced motion: final frames, no autoplay ---------- */
      html.reduce-motion *,
      html.reduce-motion *::before,
      html.reduce-motion *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        animation-delay: 0s !important;
        transition-duration: 0.001ms !important;
        transition-delay: 0s !important;
        scroll-behavior: auto !important;
      }
      html.reduce-motion .clients__track {
        animation: none !important;
      }
      html.reduce-motion .animate-on-scroll {
        opacity: 1;
        transform: none;
      }
      html.reduce-motion .mf__img.is-on {
        transform: none;
      }
      html.reduce-motion .ctx__lines,
      html.reduce-motion .mp__ring,
      html.reduce-motion .lb__sheen {
        display: none;
      }