@font-face {
      font-family: "Helvetica Brand";
      src: url("../fonts/helvetica-light.woff2") format("woff2");
      font-weight: 300;
      font-style: normal;
      font-display: swap;
    }

    @font-face {
      font-family: "Helvetica Brand";
      src: url("../fonts/helvetica.woff2") format("woff2");
      font-weight: 400 500;
      font-style: normal;
      font-display: swap;
    }

    @font-face {
      font-family: "Helvetica Brand";
      src: url("../fonts/helvetica-oblique.woff2") format("woff2");
      font-weight: 300 500;
      font-style: italic;
      font-display: swap;
    }

    @font-face {
      font-family: "Helvetica Brand";
      src: url("../fonts/helvetica-bold.woff2") format("woff2");
      font-weight: 600 700;
      font-style: normal;
      font-display: swap;
    }

    /* =========================================================
       Design tokens
       ========================================================= */
    :root {
      /* palette – HERZITE: ink navy, white, cool crystal mist */
      --c-ink-950: #17191d;
      --c-ink-900: #1f2226;
      --c-ink-800: #33373d;
      --c-ink-600: #657383;
      --c-ink-400: #9aa2ad;
      --c-mist-50: #f8f9fb;
      --c-mist-100: #f1f3f7;
      --c-mist-200: #e5e9f0;
      --c-mist-300: #d3d9e3;
      --c-sky-100: #eef0f3;
      --c-sky-300: #bfc5cc;
      --c-sky-600: #657383;
      --c-lilac-200: #e4dcf3;
      --c-white: #ffffff;
      --c-sale: #b4232f;

      /* semantic */
      --color-bg: var(--c-white);
      --color-surface: var(--c-white);
      --color-surface-soft: var(--c-mist-50);
      --color-surface-muted: var(--c-mist-100);
      --color-text: var(--c-ink-950);
      --color-text-soft: var(--c-ink-600);
      --color-muted: var(--c-ink-400);
      --color-border: var(--c-mist-200);
      --product-bg: #f4f5f6;
      --color-primary: var(--c-ink-950);
      --color-on-primary: var(--c-white);
      --color-accent: var(--c-sky-600);
      --color-accent-soft: var(--c-sky-100);

      /* typography */
      /* one family: SF Pro on Apple devices, the brand Helvetica everywhere else */
      --font-serif: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Helvetica Brand", "Helvetica Neue", Helvetica, Arial, sans-serif;
      --font-sans: "SF Pro Text", -apple-system, BlinkMacSystemFont, "Helvetica Brand", "Helvetica Neue", Helvetica, Arial, sans-serif;
      --fs-2xs: 0.6875rem;
      --fs-xs: 0.75rem;
      --fs-sm: 0.875rem;
      --fs-base: 1rem;
      --fs-md: 1.125rem;
      --fs-lg: clamp(1.15rem, 1.05rem + 0.4vw, 1.4rem);
      --fs-xl: clamp(1.5rem, 1.25rem + 1vw, 2.1rem);
      --fs-2xl: clamp(1.75rem, 1.4rem + 1.5vw, 2.6rem);
      --fs-3xl: clamp(2.2rem, 1.6rem + 2.4vw, 3.8rem);
      --lh-tight: 1.02;
      --lh-snug: 1.3;
      --lh-body: 1.65;
      --tracking-caps: 0.18em;

      /* spacing */
      --space-1: 0.25rem;
      --space-2: 0.5rem;
      --space-3: 0.75rem;
      --space-4: 1rem;
      --space-5: 1.5rem;
      --space-6: 2rem;
      --space-7: 3rem;
      --space-8: 4rem;
      --space-9: 6rem;
      --section-y: clamp(5rem, 3.5rem + 6vw, 10rem);

      /* shape */
      --radius-xs: 4px;
      --radius-sm: 8px;
      --radius-md: 16px;
      --radius-lg: 24px;
      --radius-xl: 36px;
      --radius-arch: 999px 999px 28px 28px;
      --radius-pill: 999px;
      --shadow-sm: 0 1px 2px rgb(8 17 27 / 0.05), 0 4px 14px rgb(8 17 27 / 0.04);
      --shadow-md: 0 14px 40px rgb(8 17 27 / 0.08);
      --shadow-lg: 0 30px 80px rgb(8 17 27 / 0.16);

      /* layout */
      --container: 1360px;
      --gutter: clamp(1.1rem, 0.6rem + 2.4vw, 2.5rem);
      --header-h: 84px;
      --logo-ratio: 1200 / 328; /* HERZITE logo: emblem + wordmark */

      /* motion */
      --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
      --ease-soft: cubic-bezier(0.45, 0, 0.2, 1);
      --dur-fast: 0.25s;
      --dur-base: 0.5s;
      --dur-slow: 0.9s;

      /* layers */
      --z-header: 50;
      --z-drawer: 70;
      --z-float: 80;
      --z-modal: 100;
    }

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

    html {
      -webkit-text-size-adjust: 100%;
      scroll-behavior: smooth;
      scroll-padding-top: calc(var(--header-h) + 2rem);
      interpolate-size: allow-keywords;
    }

    body {
      margin: 0;
      font-family: var(--font-sans);
      font-size: var(--fs-base);
      line-height: var(--lh-body);
      color: var(--color-text);
      background: var(--color-bg);
      font-variant-numeric: lining-nums;
      -webkit-font-smoothing: antialiased;
      overflow-x: hidden;
    }

    img,
    svg {
      display: block;
      max-width: 100%;
    }

    img {
      height: auto;
    }

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

    button,
    input {
      font: inherit;
      color: inherit;
    }

    button {
      cursor: pointer;
      background: none;
      border: 0;
      padding: 0;
    }

    h1,
    h2,
    h3,
    h4,
    p,
    ul,
    ol,
    figure,
    blockquote {
      margin: 0;
    }

    ul,
    ol {
      padding: 0;
      list-style: none;
    }

    :focus-visible {
      outline: 2px solid var(--color-accent);
      outline-offset: 3px;
      border-radius: var(--radius-xs);
    }

    ::selection {
      background: var(--c-ink-950);
      color: var(--c-white);
    }

    .sr-only {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0 0 0 0);
      white-space: nowrap;
      border: 0;
    }

    .skip-link {
      position: absolute;
      left: var(--space-4);
      top: -100px;
      z-index: var(--z-modal);
      padding: var(--space-2) var(--space-4);
      color: var(--color-on-primary);
      background: var(--color-primary);

      &:focus {
        top: var(--space-4);
      }
    }

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

    .icon {
      width: 1.25em;
      height: 1.25em;
      flex-shrink: 0;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.5;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    /* =========================================================
       Components
       ========================================================= */
    .btn {
      --btn-bg: var(--color-primary);
      --btn-fg: var(--color-on-primary);
      --btn-border: var(--color-primary);

      position: relative;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: var(--space-3);
      min-height: 54px;
      padding: 0 var(--space-6);
      font-size: var(--fs-xs);
      font-weight: 600;
      letter-spacing: var(--tracking-caps);
      text-transform: uppercase;
      color: var(--btn-fg);
      background: var(--btn-bg);
      border: 1px solid var(--btn-border);
      overflow: hidden;
      isolation: isolate;
      white-space: nowrap;
      transition: color var(--dur-base) var(--ease-out), border-color var(--dur-base);

      /* sliding fill on hover */
      &::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        background: var(--btn-hover-bg, var(--c-ink-800));
        transform: scaleX(0);
        transform-origin: right;
        transition: transform var(--dur-base) var(--ease-out);
      }

      .icon {
        width: 18px;
        height: 18px;
        transition: transform var(--dur-base) var(--ease-out);
      }

      &:hover {
        color: var(--btn-hover-fg, var(--btn-fg));

        &::before {
          transform: scaleX(1);
          transform-origin: left;
        }

        .icon {
          transform: translateX(4px);
        }
      }

      &.btn-outline {
        --btn-bg: transparent;
        --btn-fg: var(--color-text);
        --btn-border: var(--color-text);
        --btn-hover-bg: var(--color-primary);
        --btn-hover-fg: var(--color-on-primary);
      }

      &.btn-light {
        --btn-bg: var(--c-white);
        --btn-fg: var(--c-ink-950);
        --btn-border: var(--c-white);
        --btn-hover-bg: var(--c-mist-200);
      }

      &.btn-ghost-light {
        --btn-bg: transparent;
        --btn-fg: var(--c-white);
        --btn-border: rgb(255 255 255 / 0.5);
        --btn-hover-bg: var(--c-white);
        --btn-hover-fg: var(--c-ink-950);
      }

      &.btn-block {
        width: 100%;
      }
    }

    .link-line {
      position: relative;
      display: inline-flex;
      align-items: center;
      gap: var(--space-2);
      padding-bottom: 4px;
      font-size: var(--fs-xs);
      font-weight: 600;
      letter-spacing: var(--tracking-caps);
      text-transform: uppercase;
      white-space: nowrap;

      &::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 1px;
        background: currentColor;
        transform-origin: right;
        transition: transform var(--dur-base) var(--ease-out);
      }

      .icon {
        width: 16px;
        height: 16px;
        transition: transform var(--dur-base) var(--ease-out);
      }

      &:hover {
        &::after {
          animation: line-redraw var(--dur-slow) var(--ease-out);
        }

        .icon {
          transform: translateX(4px);
        }
      }
    }

    @keyframes line-redraw {
      0% { transform: scaleX(1); transform-origin: right; }
      45% { transform: scaleX(0); transform-origin: right; }
      46% { transform: scaleX(0); transform-origin: left; }
      100% { transform: scaleX(1); transform-origin: left; }
    }

    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: var(--space-3);
      font-size: var(--fs-2xs);
      font-weight: 600;
      letter-spacing: 0.24em;
      text-transform: uppercase;
      color: var(--color-accent);

      &::before {
        content: "";
        width: 7px;
        height: 7px;
        background: currentColor;
        transform: rotate(45deg);
      }
    }

    .serif {
      font-family: var(--font-serif);
      font-weight: 600;
      line-height: var(--lh-tight);
      letter-spacing: -0.01em;

      em {
        font-style: normal;
        font-weight: 600;
        color: var(--color-text-soft);
      }
    }

    .section {
      padding-block: var(--section-y);
    }

    .section-head {
      display: flex;
      align-items: end;
      justify-content: space-between;
      gap: var(--space-6);
      margin-bottom: clamp(2rem, 1.5rem + 2vw, 3.5rem);

      &.is-center {
        flex-direction: column;
        align-items: center;
        text-align: center;
      }

      .title {
        margin-top: var(--space-4);
        font-family: var(--font-serif);
        font-size: var(--fs-2xl);
        font-weight: 600;
        line-height: var(--lh-tight);
        letter-spacing: -0.015em;

        em {
          font-style: normal;
          font-weight: 600;
          color: var(--color-text-soft);
        }
      }

      .lead {
        max-width: 52ch;
        margin-top: var(--space-4);
        color: var(--color-text-soft);
      }
    }

    /* scroll-driven reveal (progressive enhancement) */
    @supports (animation-timeline: view()) {
      @media (prefers-reduced-motion: no-preference) {
        .reveal {
          animation: reveal-up linear both;
          animation-timeline: view();
          animation-range: entry 0% entry 45%;
        }

        .reveal-img {
          animation: reveal-clip linear both;
          animation-timeline: view();
          animation-range: entry 0% entry 70%;
        }
      }
    }

    @keyframes reveal-up {
      from {
        opacity: 0;
        transform: translateY(48px);
      }

      to {
        opacity: 1;
        transform: none;
      }
    }

    @keyframes reveal-clip {
      from {
        clip-path: inset(18% 0 0 0 round var(--radius-lg));
        scale: 1.06;
      }

      to {
        clip-path: inset(0 0 0 0 round var(--radius-lg));
        scale: 1;
      }
    }

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

    /* =========================================================
       Announcement bar
       ========================================================= */
    .announcement {
      color: rgb(255 255 255 / 0.86);
      background: var(--c-ink-950);
      font-size: var(--fs-xs);
      letter-spacing: 0.04em;
      overflow: hidden;

      .track {
        display: flex;
        width: max-content;
        animation: marquee 44s linear infinite;
      }

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

      ul {
        display: flex;
      }

      li {
        display: inline-flex;
        align-items: center;
        gap: var(--space-2);
        padding: 10px var(--space-7);
        white-space: nowrap;

        &::after {
          content: "";
          width: 5px;
          height: 5px;
          margin-left: var(--space-7);
          border: 1px solid currentColor;
          transform: rotate(45deg);
          opacity: 0.5;
        }

        b {
          font-weight: 600;
          color: var(--c-white);
        }
      }
    }

    /* =========================================================
       Header
       ========================================================= */
    .site-header {
      position: sticky;
      top: 0;
      z-index: var(--z-header);
      border-bottom: 1px solid var(--color-border);

      &::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        background: rgb(255 255 255 / 0.86);
        backdrop-filter: saturate(1.4) blur(14px);
      }

      .bar {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        align-items: center;
        gap: var(--space-5);
        min-height: var(--header-h);
      }

      .brand {
        display: flex;
        align-items: center;
        gap: var(--space-2);
      }

      .logo img {
        width: 156px;
        height: auto;
        aspect-ratio: var(--logo-ratio);
        transition: opacity var(--dur-fast);
      }

      .logo:hover img {
        opacity: 0.75;
      }

      .nav-toggle {
        display: none;
      }

      .burger,
      .drawer-close {
        display: none;
        place-items: center;
        width: 44px;
        height: 44px;
        cursor: pointer;
      }
    }

    .main-nav {
      .menu {
        display: flex;
        align-items: center;
        gap: var(--space-1);
      }

      .menu > li > a {
        position: relative;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 30px var(--space-3);
        font-size: var(--fs-xs);
        font-weight: 500;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        white-space: nowrap;
        color: var(--color-text-soft);
        transition: color var(--dur-fast);

        &::after {
          content: "";
          position: absolute;
          left: var(--space-3);
          right: var(--space-3);
          bottom: 22px;
          height: 1px;
          background: var(--color-text);
          transform: scaleX(0);
          transform-origin: right;
          transition: transform var(--dur-base) var(--ease-out);
        }

        .icon {
          width: 14px;
          height: 14px;
          transition: transform var(--dur-base) var(--ease-out);
        }
      }

      .menu > li:is(:hover, :focus-within) > a,
      .menu > li > a[aria-current="page"] {
        color: var(--color-text);

        &::after {
          transform: scaleX(1);
          transform-origin: left;
        }
      }

      .menu > li:is(:hover, :focus-within) > a .icon {
        transform: rotate(180deg);
      }
    }

    .mega {
      position: absolute;
      left: 0;
      right: 0;
      top: 100%;
      background: var(--color-surface);
      border-top: 1px solid var(--color-border);
      box-shadow: 0 40px 60px rgb(8 17 27 / 0.08);
      opacity: 0;
      visibility: hidden;
      transform: translateY(10px);
      transition: opacity var(--dur-fast), transform var(--dur-base) var(--ease-out), visibility var(--dur-fast);

      .inner {
        display: grid;
        grid-template-columns: 1fr 1fr 2.2fr;
        gap: var(--space-7);
        padding-block: var(--space-7);
      }

      h4 {
        margin-bottom: var(--space-4);
        font-size: var(--fs-2xs);
        font-weight: 600;
        letter-spacing: 0.22em;
        text-transform: uppercase;
        color: var(--color-muted);

        a {
          transition: color var(--dur-fast);

          &:hover {
            color: var(--color-text);
          }
        }
      }

      li a {
        display: inline-block;
        padding: 6px 0;
        font-family: var(--font-serif);
        font-size: 1.3rem;
        transition: color var(--dur-fast), transform var(--dur-base) var(--ease-out);

        &:hover {
          color: var(--color-accent);
          transform: translateX(6px);
        }
      }

      .features {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: var(--space-4);
      }

      .feature {
        position: relative;
        display: flex;
        align-items: end;
        aspect-ratio: 3 / 4;
        padding: var(--space-4);
        color: var(--c-white);
        overflow: hidden;
        isolation: isolate;

        img {
          position: absolute;
          inset: 0;
          z-index: -2;
          width: 100%;
          height: 100%;
          object-fit: cover;
          transition: transform 1.2s var(--ease-out);
        }

        &::before {
          content: "";
          position: absolute;
          inset: 0;
          z-index: -1;
          background: linear-gradient(180deg, transparent 45%, rgb(8 17 27 / 0.7));
        }

        span {
          font-family: var(--font-serif);
          font-size: 1.35rem;
          line-height: 1.1;
        }

        small {
          display: block;
          font-family: var(--font-sans);
          font-size: var(--fs-2xs);
          letter-spacing: 0.18em;
          text-transform: uppercase;
          opacity: 0.8;
        }

        &:hover img {
          transform: scale(1.07);
        }
      }
    }

    .menu > li:is(:hover, :focus-within) > .mega {
      opacity: 1;
      visibility: visible;
      transform: none;
    }

    .header-tools {
      display: flex;
      align-items: center;
      justify-content: end;
      gap: var(--space-1);

      .lang {
        position: relative;

        > button {
          display: inline-flex;
          align-items: center;
          gap: 6px;
          height: 42px;
          padding: 0 var(--space-3);
          font-size: var(--fs-xs);
          letter-spacing: 0.08em;
          white-space: nowrap;
          color: var(--color-text-soft);

          .icon {
            width: 16px;
            height: 16px;
          }

          .chev {
            width: 12px;
            height: 12px;
          }
        }

        ul {
          position: absolute;
          top: calc(100% + 6px);
          right: 0;
          min-width: 160px;
          padding: var(--space-2);
          background: var(--color-surface);
          border: 1px solid var(--color-border);
          box-shadow: var(--shadow-md);
          opacity: 0;
          visibility: hidden;
          transform: translateY(6px);
          transition: opacity var(--dur-fast), transform var(--dur-base) var(--ease-out), visibility var(--dur-fast);
        }

        li a {
          display: flex;
          justify-content: space-between;
          padding: 8px 12px;
          font-size: var(--fs-sm);
          transition: background var(--dur-fast);

          &:hover {
            background: var(--color-surface-muted);
          }
        }

        &:is(:hover, :focus-within) ul {
          opacity: 1;
          visibility: visible;
          transform: none;
        }
      }

      .divider {
        width: 1px;
        height: 18px;
        margin-inline: var(--space-2);
        background: var(--color-border);
      }

      .tool {
        position: relative;
        display: grid;
        place-items: center;
        width: 42px;
        height: 42px;
        border-radius: 50%;
        transition: background var(--dur-fast);

        .icon {
          width: 21px;
          height: 21px;
        }

        &:hover {
          background: var(--color-surface-muted);
        }
      }

      .count {
        position: absolute;
        top: 3px;
        right: 3px;
        display: grid;
        place-items: center;
        min-width: 17px;
        height: 17px;
        padding: 0 4px;
        font-size: 10px;
        font-weight: 600;
        color: var(--c-white);
        background: var(--c-ink-950);
        border-radius: var(--radius-pill);
      }
    }

    .drawer-backdrop {
      position: fixed;
      inset: 0;
      z-index: calc(var(--z-header) - 1);
      background: rgb(8 17 27 / 0.45);
      backdrop-filter: blur(3px);
      opacity: 0;
      visibility: hidden;
      transition: opacity var(--dur-base), visibility var(--dur-base);
    }

    @media (max-width: 1180px) {
      .main-nav .menu > li > a {
        padding-inline: var(--space-2);
        letter-spacing: 0.1em;

        &::after {
          left: var(--space-2);
          right: var(--space-2);
        }
      }

      .header-tools .lang .label {
        display: none;
      }
    }

    @media (max-width: 1024px) {
      :root {
        --header-h: 68px;
      }

      .site-header {
        .bar {
          grid-template-columns: 1fr auto;
        }

        .burger {
          display: grid;
          margin-left: calc(var(--space-2) * -1);
        }

        .logo img {
          width: 138px;
        }

        .drawer-close {
          display: grid;
          position: absolute;
          top: var(--space-3);
          right: var(--space-3);
        }
      }

      .site-header .bar > .main-nav {
        position: fixed;
        inset: 0 auto 0 0;
        z-index: var(--z-drawer);
        width: min(88vw, 380px);
        padding: 80px var(--space-6) var(--space-6);
        overflow-y: auto;
        background: var(--color-surface);
        box-shadow: none;
        transform: translateX(-102%);
        transition: transform var(--dur-base) var(--ease-out);

        .menu {
          flex-direction: column;
          align-items: stretch;
          gap: 0;
        }

        .menu > li > a {
          display: flex;
          justify-content: space-between;
          padding: var(--space-4) 0;
          font-family: var(--font-serif);
          font-size: 1.6rem;
          letter-spacing: 0;
          text-transform: none;
          color: var(--color-text);
          border-bottom: 1px solid var(--color-border);

          &::after {
            display: none;
          }

          .icon {
            transform: rotate(-90deg);
          }
        }

        .mega {
          position: static;
          background: none;
          border: 0;
          box-shadow: none;
          opacity: 1;
          visibility: visible;
          transform: none;

          .container.inner {
            grid-template-columns: 1fr;
            gap: var(--space-4);
            padding: var(--space-4) 0 var(--space-5) var(--space-4);
          }

          h4 {
            margin-bottom: var(--space-1);
          }

          li a {
            font-size: 1.15rem;
          }

          .features {
            display: none;
          }
        }

        .menu > li > a .icon {
          display: none;
        }
      }

      .header-tools .lang,
      .header-tools .divider,
      .header-tools .tool-account {
        display: none;
      }

      body:has(#nav-toggle:checked) {
        overflow: hidden;

        .promo-tab,
        .to-top {
          display: none;
        }

        .site-header .bar > .main-nav {
          box-shadow: var(--shadow-lg);
          transform: none;
        }

        .drawer-backdrop {
          opacity: 1;
          visibility: visible;
        }
      }
    }

    /* =========================================================
       Hero (pure CSS crossfade slider)
       ========================================================= */
    .hero {
      --hero-cycle: 24s;
      --hero-step: 8s;

      position: relative;
      overflow: hidden;
      background: var(--c-mist-50);
      isolation: isolate;

      /* drifting crystal light */
      &::before,
      &::after {
        content: "";
        position: absolute;
        z-index: -1;
        width: 52vw;
        aspect-ratio: 1;
        border-radius: 50%;
        filter: blur(80px);
        opacity: 0.55;
        animation: aurora 18s var(--ease-soft) infinite alternate;
      }

      &::before {
        top: -20vw;
        left: -14vw;
        background: radial-gradient(circle, var(--c-sky-300), transparent 65%);
      }

      &::after {
        right: -18vw;
        bottom: -26vw;
        background: radial-gradient(circle, var(--c-lilac-200), transparent 65%);
        animation-delay: -9s;
      }

      .slides {
        position: relative;
        min-height: clamp(640px, 90vh, 860px);
      }

      .slide {
        --delay: calc(var(--i) * var(--hero-step));

        position: absolute;
        inset: 0;
        display: grid;
        align-items: center;
        padding-top: clamp(48px, 7vh, 88px);
        padding-bottom: 90px;
        opacity: 0;
        visibility: hidden;
        animation: hero-slide var(--hero-cycle) infinite;
        animation-delay: var(--delay);
      }

      .inner {
        display: grid;
        grid-template-columns: 0.95fr 1.05fr;
        align-items: center;
        gap: clamp(2rem, 1rem + 4vw, 6rem);
      }

      .copy > * {
        animation: hero-rise var(--hero-cycle) infinite both;
        animation-delay: calc(var(--delay) + var(--stagger, 0s));
      }

      .h1 {
        --stagger: 0.12s;

        margin-top: var(--space-5);
        font-family: var(--font-serif);
        font-size: var(--fs-3xl);
        font-weight: 600;
        line-height: 0.98;
        letter-spacing: -0.02em;

        em {
          display: block;
          font-style: italic;
          font-weight: 400;
          color: var(--color-accent);
        }
      }

      .text {
        --stagger: 0.24s;

        max-width: 44ch;
        margin-top: var(--space-5);
        font-size: var(--fs-md);
        color: var(--color-text-soft);
      }

      .actions {
        --stagger: 0.36s;

        display: flex;
        flex-wrap: wrap;
        gap: var(--space-3);
        margin-top: var(--space-6);
      }

      .assure {
        --stagger: 0.46s;

        display: flex;
        align-items: center;
        gap: var(--space-3);
        margin-top: var(--space-6);
        font-size: var(--fs-xs);
        color: var(--color-text-soft);

        .icon {
          width: 34px;
          height: 34px;
          padding: 8px;
          color: var(--color-accent);
          background: var(--color-accent-soft);
          border-radius: 50%;
        }
      }

      .media {
        position: relative;
        justify-self: end;
        width: min(100%, 600px, 53vh);
        animation: hero-media var(--hero-cycle) infinite both;
        animation-delay: var(--delay);

        .frame {
          position: relative;
          aspect-ratio: 5 / 6;
          max-height: 64vh;
          margin-left: auto;
          border-radius: var(--radius-arch);
          overflow: hidden;
          box-shadow: var(--shadow-lg);
        }

        .frame img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          animation: ken-burns var(--hero-cycle) linear infinite both;
          animation-delay: var(--delay);
        }

        &::before {
          content: "";
          position: absolute;
          inset: -18px -18px 18px 18px;
          z-index: -1;
          border: 1px solid var(--c-mist-300);
          border-radius: var(--radius-arch);
        }
      }

      .tag {
        position: absolute;
        left: -56px;
        bottom: 64px;
        display: flex;
        align-items: center;
        gap: var(--space-3);
        padding: var(--space-3) var(--space-5) var(--space-3) var(--space-3);
        background: rgb(255 255 255 / 0.82);
        border: 1px solid rgb(255 255 255 / 0.9);
        box-shadow: var(--shadow-md);
        backdrop-filter: blur(12px);
        animation: float 7s var(--ease-soft) infinite;

        img {
          width: 56px;
          height: 56px;
          object-fit: cover;
          border-radius: 50%;
        }

        small {
          display: block;
          font-size: var(--fs-2xs);
          letter-spacing: 0.16em;
          text-transform: uppercase;
          color: var(--color-muted);
        }

        strong {
          display: block;
          font-family: var(--font-serif);
          font-size: 1.25rem;
          font-weight: 500;
          line-height: 1.2;
        }

        span {
          font-size: var(--fs-sm);
          font-weight: 600;
        }
      }

      .seal {
        position: absolute;
        top: 18%;
        left: -64px;
        width: 128px;
        height: 128px;
        color: var(--c-ink-950);

        svg {
          width: 100%;
          height: 100%;
          animation: spin 22s linear infinite;
        }

        text {
          font-family: var(--font-sans);
          font-size: 10.5px;
          font-weight: 500;
          letter-spacing: 3.4px;
          text-transform: uppercase;
          fill: currentColor;
        }

        &::before {
          content: "";
          position: absolute;
          inset: 0;
          background: rgb(255 255 255 / 0.85);
          border-radius: 50%;
          box-shadow: var(--shadow-md);
          backdrop-filter: blur(8px);
          z-index: -1;
        }

        img {
          position: absolute;
          top: 50%;
          left: 50%;
          width: 54%;
          height: auto;
          aspect-ratio: var(--logo-ratio);
          translate: -50% -50%;
        }
      }

      /* progress navigation */
      .progress {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 3;

        ol {
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          gap: var(--space-6);
        }

        li {
          --delay: calc(var(--i) * var(--hero-step));

          position: relative;
          display: flex;
          align-items: baseline;
          gap: var(--space-3);
          padding: var(--space-5) 0 var(--space-6);
          font-size: var(--fs-xs);
          letter-spacing: 0.14em;
          text-transform: uppercase;
          color: var(--color-muted);
          animation: hero-label var(--hero-cycle) infinite;
          animation-delay: var(--delay);

          b {
            font-family: var(--font-serif);
            font-size: 1.15rem;
            font-style: italic;
            font-weight: 500;
            letter-spacing: 0;
          }

          &::before,
          &::after {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 1px;
            background: var(--c-mist-300);
          }

          &::after {
            height: 2px;
            top: -0.5px;
            background: var(--c-ink-950);
            transform: scaleX(0);
            transform-origin: left;
            animation: hero-bar var(--hero-cycle) linear infinite;
            animation-delay: var(--delay);
          }
        }
      }

      &:hover :is(.slide, .copy > *, .media, .media .frame img, .progress li, .progress li::after) {
        animation-play-state: paused;
      }
    }

    @keyframes aurora {
      from { transform: translate(0, 0) scale(1); }
      to { transform: translate(8vw, 6vw) scale(1.15); }
    }

    @keyframes hero-slide {
      0% { opacity: 0; visibility: visible; z-index: 2; }
      5%, 33.33% { opacity: 1; visibility: visible; z-index: 2; }
      38% { opacity: 0; visibility: hidden; z-index: 1; }
      100% { opacity: 0; visibility: hidden; z-index: 1; }
    }

    @keyframes hero-rise {
      0% { opacity: 0; transform: translateY(32px); filter: blur(6px); }
      7%, 33.33% { opacity: 1; transform: none; filter: blur(0); }
      38%, 100% { opacity: 0; transform: translateY(-14px); filter: blur(4px); }
    }

    @keyframes hero-media {
      0% { opacity: 0; transform: translateY(40px); }
      8%, 33.33% { opacity: 1; transform: none; }
      38%, 100% { opacity: 0; transform: translateY(-20px); }
    }

    @keyframes ken-burns {
      0% { transform: scale(1.14); }
      38% { transform: scale(1); }
      100% { transform: scale(1); }
    }

    @keyframes hero-label {
      0%, 33.33% { color: var(--c-ink-950); }
      33.34%, 100% { color: var(--c-ink-400); }
    }

    @keyframes hero-bar {
      0% { transform: scaleX(0); }
      33.33% { transform: scaleX(1); }
      33.34%, 100% { transform: scaleX(0); }
    }

    @keyframes float {
      0%, 100% { translate: 0 0; }
      50% { translate: 0 -12px; }
    }

    @keyframes spin {
      to { rotate: 360deg; }
    }

    @media (max-width: 1024px) {
      .hero {
        .slides {
          min-height: 1040px;
        }

        .slide {
          align-items: start;
          padding-top: var(--space-6);
        }

        .inner {
          grid-template-columns: 1fr;
          gap: var(--space-6);
        }

        .media {
          order: -1;
          justify-self: center;
          width: min(78vw, 440px);

          .frame {
            aspect-ratio: 1;
          }
        }

        .seal {
          left: auto;
          right: -24px;
          top: auto;
          bottom: -24px;
          width: 104px;
          height: 104px;
        }

        .tag {
          display: none;
        }

        .copy {
          text-align: center;
        }

        .text {
          margin-inline: auto;
        }

        .actions,
        .assure {
          justify-content: center;
        }

        .progress li {
          justify-content: center;
          font-size: 0;

          b {
            font-size: 1.15rem;
          }
        }
      }
    }

    @media (max-width: 560px) {
      .hero {
        .slides {
          min-height: 980px;
        }

        .actions .btn {
          flex: 1 1 100%;
        }

        .assure {
          text-align: left;
        }

        .progress ol {
          gap: var(--space-3);
        }
      }
    }

    /* =========================================================
       Promise
       ========================================================= */
    .promise {
      border-bottom: 1px solid var(--color-border);

      .container {
        max-width: 1680px;
      }

      .promise-list {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
      }

      li {
        padding: var(--space-7) var(--space-6);
        text-align: center;
        transition: background var(--dur-base);

        & + li {
          border-left: 1px solid var(--color-border);
        }

        &:hover {
          background: var(--color-surface-soft);

          .icon {
            transform: translateY(-4px);
            color: var(--color-accent);
          }
        }
      }

      .icon {
        width: 30px;
        height: 30px;
        margin: 0 auto var(--space-4);
        stroke-width: 1.2;
        transition: transform var(--dur-base) var(--ease-out), color var(--dur-fast);
      }

      h3 {
        font-size: var(--fs-2xs);
        font-weight: 600;
        letter-spacing: 0.22em;
        text-transform: uppercase;
      }

      p {
        max-width: 30ch;
        margin: var(--space-2) auto 0;
        font-size: var(--fs-sm);
        color: var(--color-text-soft);
      }
    }

    /* =========================================================
       Bead marquee
       ========================================================= */
    .bead-strip {
      padding-block: var(--space-6);
      background: var(--color-surface-soft);
      border-bottom: 1px solid var(--color-border);
      overflow: hidden;
      mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);

      .track {
        display: flex;
        width: max-content;
        animation: marquee 50s linear infinite;
      }

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

      ul {
        display: flex;
      }

      li {
        display: flex;
        align-items: center;
        gap: var(--space-4);
        padding-inline: var(--space-6);
        font-family: var(--font-serif);
        font-size: 1.6rem;
        font-style: italic;
        white-space: nowrap;
        color: var(--color-text-soft);

        &:nth-child(odd) img {
          animation-delay: -2s;
        }
      }

      img {
        width: 64px;
        height: 64px;
        filter: drop-shadow(0 10px 12px rgb(8 17 27 / 0.18));
        animation: bob 4s var(--ease-soft) infinite;
      }
    }

    @keyframes bob {
      0%, 100% { translate: 0 0; rotate: 0deg; }
      50% { translate: 0 -6px; rotate: 12deg; }
    }

    /* =========================================================
       Five elements – hover panels
       ========================================================= */
    .five {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: clamp(8px, 1vw, 14px);
    }

    .five-card {
      position: relative;
      display: grid;
      place-items: center;
      aspect-ratio: 1 / 2.05;
      overflow: hidden;
      color: var(--c-white);
      text-align: center;
      isolation: isolate;

      img {
        position: absolute;
        inset: 0;
        z-index: -2;
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 1.4s var(--ease-out), filter var(--dur-slow) var(--ease-out);
      }

      /* black veil – lifts on the hovered card only */
      &::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        background:
          linear-gradient(180deg, rgb(0 0 0 / 0.15), rgb(0 0 0 / 0.35)),
          rgb(0 0 0 / 0.42);
        transition: opacity var(--dur-slow) var(--ease-out);
      }

      .in {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-inline: var(--space-3);
        transition: transform var(--dur-slow) var(--ease-out);
      }

      svg {
        width: 40px;
        height: 40px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.1;
        stroke-linecap: round;
        stroke-linejoin: round;
      }

      strong {
        margin-top: var(--space-4);
        font-family: var(--font-serif);
        font-size: clamp(1.15rem, 0.9rem + 0.9vw, 1.7rem);
        font-weight: 400;
        letter-spacing: 0.24em;
        margin-right: -0.24em;
        text-transform: uppercase;
      }

      small {
        margin-top: var(--space-2);
        font-size: var(--fs-2xs);
        letter-spacing: 0.2em;
        text-transform: uppercase;
        color: rgb(255 255 255 / 0.85);
      }

      .rule {
        width: 30px;
        height: 1px;
        margin-top: var(--space-4);
        background: rgb(255 255 255 / 0.85);
        transition: width var(--dur-slow) var(--ease-out);
      }

      .cta {
        margin-top: var(--space-4);
        font-size: var(--fs-2xs);
        letter-spacing: 0.22em;
        text-transform: uppercase;
        opacity: 0;
        transform: translateY(8px);
        transition: opacity var(--dur-base), transform var(--dur-base) var(--ease-out);
      }

      &:hover,
      &:focus-visible {
        &::after {
          opacity: 0;
        }

        img {
          transform: scale(1.06);
        }

        .in {
          transform: translateY(-8px);
        }

        .rule {
          width: 64px;
        }

        .cta {
          opacity: 1;
          transform: none;
        }
      }
    }

    /* text stays readable once the veil lifts */
    .five-card .in {
      text-shadow: 0 2px 18px rgb(0 0 0 / 0.55);
    }

    @media (max-width: 900px) {
      .five {
        grid-auto-flow: column;
        grid-template-columns: none;
        grid-auto-columns: 44%;
        margin-inline: calc(var(--gutter) * -1);
        padding-inline: var(--gutter);
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-padding-inline: var(--gutter);
        scrollbar-width: none;

        &::-webkit-scrollbar {
          display: none;
        }

        > * {
          scroll-snap-align: start;
        }
      }

      /* no hover on touch – keep a lighter veil and show the CTA */
      .five-card {
        &::after {
          opacity: 0.6;
        }

        .cta {
          opacity: 1;
          transform: none;
        }
      }
    }

    @media (max-width: 560px) {
      .five {
        grid-auto-columns: 62%;
      }
    }

    /* =========================================================
       Products
       ========================================================= */
    .shop {
      background: var(--color-surface-soft);
    }

    .cat-tiles {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: var(--space-6) var(--space-5);
    }

    .cat-tile {
      display: block;

      .media {
        aspect-ratio: 4 / 5;
        overflow: hidden;
        background: var(--color-surface-muted);

        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          transition: transform 1.2s var(--ease-out);
        }
      }

      .body {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-3);
        margin-top: var(--space-4);
      }

      h3 {
        font-family: var(--font-serif);
        font-size: var(--fs-lg);
        font-weight: 600;
        line-height: var(--lh-tight);
      }

      p {
        margin-top: 4px;
        font-size: var(--fs-sm);
        color: var(--color-text-soft);
      }

      .go {
        display: grid;
        flex-shrink: 0;
        place-items: center;
        width: 40px;
        height: 40px;
        border: 1px solid var(--color-border);
        border-radius: 50%;
        transition: color var(--dur-fast), background var(--dur-fast), border-color var(--dur-fast);
      }

      &:hover {
        img {
          transform: scale(1.05);
        }

        .go {
          color: var(--c-white);
          background: var(--color-text);
          border-color: var(--color-text);
        }
      }
    }

    @media (max-width: 1024px) {
      .cat-tiles {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    @media (max-width: 560px) {
      .cat-tiles {
        gap: var(--space-5) var(--space-3);
      }

      .cat-tile p {
        display: none;
      }

      .cat-tile .go {
        width: 32px;
        height: 32px;
      }
    }

    .product-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: var(--space-6) var(--space-5);
    }

    .product {
      .media {
        position: relative;
        aspect-ratio: 4 / 5;
        overflow: hidden;
        background: var(--color-surface-muted);

        .img-link {
          display: block;
          height: 100%;
        }

        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          transition: transform 1.2s var(--ease-out);
        }
      }

      .badge {
        position: absolute;
        top: var(--space-4);
        left: var(--space-4);
        padding: 5px 12px;
        font-size: var(--fs-2xs);
        font-weight: 600;
        letter-spacing: 0.16em;
        text-transform: uppercase;
        background: rgb(255 255 255 / 0.9);
        backdrop-filter: blur(6px);
      }

      .wish {
        position: absolute;
        top: var(--space-3);
        right: var(--space-3);
        display: grid;
        place-items: center;
        width: 40px;
        height: 40px;
        background: rgb(255 255 255 / 0.9);
        border-radius: 50%;
        opacity: 0;
        transform: scale(0.8);
        transition: opacity var(--dur-fast), transform var(--dur-base) var(--ease-out), color var(--dur-fast);

        .icon {
          width: 18px;
          height: 18px;
        }

        &:hover {
          color: var(--c-sale);

          .icon {
            fill: currentColor;
          }
        }
      }

      .quick {
        position: absolute;
        left: var(--space-4);
        right: var(--space-4);
        bottom: var(--space-4);
        min-height: 48px;
        opacity: 0;
        transform: translateY(16px);
        transition: opacity var(--dur-base), transform var(--dur-base) var(--ease-out), color var(--dur-base);
      }

      .body {
        padding-top: var(--space-4);
        text-align: center;
      }

      .cat {
        font-size: var(--fs-2xs);
        letter-spacing: 0.18em;
        text-transform: uppercase;
        color: var(--color-muted);
      }

      .name {
        margin-top: var(--space-1);
        font-family: var(--font-serif);
        font-size: 1.45rem;
        font-weight: 500;
        line-height: 1.2;

        a {
          background: linear-gradient(currentColor, currentColor) 50% 100% / 0 1px no-repeat;
          transition: background-size var(--dur-base) var(--ease-out);

          &:hover {
            background-size: 100% 1px;
          }
        }
      }

      .price {
        margin-top: var(--space-1);
        font-size: var(--fs-sm);
        font-weight: 500;
        letter-spacing: 0.04em;
      }

      &:hover,
      &:focus-within {
        .media img {
          transform: scale(1.07);
        }

        .wish,
        .quick {
          opacity: 1;
          transform: none;
        }
      }
    }

    @media (max-width: 1024px) {
      .product-grid {
        grid-template-columns: none;
        grid-auto-flow: column;
        grid-auto-columns: var(--card-w, 38%);
        margin-inline: calc(var(--gutter) * -1);
        padding-inline: var(--gutter);
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-padding-inline: var(--gutter);
        scrollbar-width: none;

        &::-webkit-scrollbar {
          display: none;
        }

        > * {
          scroll-snap-align: start;
        }
      }

      .product {
        .wish {
          opacity: 1;
          transform: none;
        }

        .quick {
          display: none;
        }
      }
    }

    @media (max-width: 560px) {
      .product-grid {
        --card-w: 72%;
      }
    }

    /* =========================================================
       Design studio + bead ring
       ========================================================= */
    .studio-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      align-items: center;
      gap: clamp(2.5rem, 1rem + 5vw, 7rem);
    }

    .ring-wrap {
      position: relative;
      display: grid;
      place-items: center;
      aspect-ratio: 1;
      width: min(100%, 560px);
      margin-inline: auto;
      background: radial-gradient(circle at 50% 50%, var(--c-white) 0 34%, var(--c-mist-100) 35%, var(--c-mist-50) 70%);
      border-radius: 50%;

      &::before {
        content: "";
        position: absolute;
        inset: -22px;
        border: 1px dashed var(--c-mist-300);
        border-radius: 50%;
        animation: spin 80s linear infinite reverse;
      }
    }

    .ring {
      --r: 39%;
      --bead: 12.4%;

      position: absolute;
      inset: 0;
      animation: spin 60s linear infinite;

      &::before {
        content: "";
        position: absolute;
        inset: calc(50% - var(--r));
        border: 1.5px solid rgb(8 17 27 / 0.12);
        border-radius: 50%;
      }

      span {
        --a: calc(var(--n) * 20deg);

        position: absolute;
        left: calc(50% + cos(var(--a)) * var(--r));
        top: calc(50% + sin(var(--a)) * var(--r));
        width: var(--bead);
        aspect-ratio: 1;
        translate: -50% -50%;
        transition: scale var(--dur-base) var(--ease-out);

        img {
          width: 100%;
          height: 100%;
          filter: drop-shadow(0 8px 10px rgb(8 17 27 / 0.22));
        }

        &:hover {
          scale: 1.15;
        }
      }
    }

    .ring-wrap:hover .ring {
      animation-play-state: paused;
    }

    .ring-center {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;

      strong {
        margin-top: var(--space-3);
        font-family: var(--font-serif);
        font-size: clamp(1.3rem, 0.95rem + 1vw, 1.9rem);
        font-weight: 500;
        line-height: 1.1;

        em {
          display: block;
          font-style: italic;
          font-weight: 400;
          color: var(--color-accent);
        }
      }

      .from {
        margin-top: var(--space-2);
        font-size: var(--fs-sm);
        color: var(--color-text-soft);

        b {
          font-weight: 600;
          color: var(--color-text);
        }
      }
    }

    .studio-copy .section-head {
      margin-bottom: var(--space-6);
    }

    .steps {
      display: grid;
      counter-reset: step;

      li {
        position: relative;
        display: grid;
        grid-template-columns: 64px 1fr;
        gap: var(--space-4);
        padding-block: var(--space-5);
        border-top: 1px solid var(--color-border);
        transition: padding var(--dur-base) var(--ease-out);

        &::before {
          content: "";
          position: absolute;
          top: -1px;
          left: 0;
          width: 100%;
          height: 1px;
          background: var(--c-ink-950);
          transform: scaleX(0);
          transform-origin: left;
          transition: transform var(--dur-slow) var(--ease-out);
        }

        &:hover {
          padding-left: var(--space-3);

          &::before {
            transform: scaleX(1);
          }

          .num {
            color: var(--color-accent);
          }
        }
      }

      .num {
        font-family: var(--font-serif);
        font-size: 2.2rem;
        font-style: italic;
        line-height: 1;
        color: var(--color-muted);
        transition: color var(--dur-fast);
      }

      h3 {
        font-family: var(--font-serif);
        font-size: 1.55rem;
        font-weight: 500;
        line-height: 1.2;
      }

      p {
        margin-top: var(--space-1);
        color: var(--color-text-soft);
      }
    }

    .studio-actions {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: var(--space-6);
      margin-top: var(--space-6);
    }

    @media (max-width: 1024px) {
      .promise .promise-list {
        grid-template-columns: repeat(2, 1fr);

        li:nth-child(3) {
          border-left: 0;
        }

        li:nth-child(n + 3) {
          border-top: 1px solid var(--color-border);
        }
      }

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

      .ring-wrap {
        width: min(86vw, 480px);
      }
    }

    @media (max-width: 560px) {
      .promise li {
        padding: var(--space-5) var(--space-3);
      }

      .promise p {
        font-size: var(--fs-xs);
      }

      .section-head {
        flex-direction: column;
        align-items: start;
      }
    }

    /* =========================================================
       Collections
       ========================================================= */
    .coll-grid {
      display: grid;
      grid-template-columns: 0.8fr 1.2fr;
      gap: clamp(2rem, 1rem + 4vw, 6rem);
      align-items: start;
    }

    .coll-intro {
      position: sticky;
      top: calc(var(--header-h) + var(--space-7));

      .serif {
        margin-top: var(--space-4);
        font-size: var(--fs-2xl);
      }

      p {
        max-width: 42ch;
        margin: var(--space-5) 0 var(--space-6);
        color: var(--color-text-soft);
      }
    }

    .coll-cards {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: var(--space-5);

      > :nth-child(even) {
        margin-top: var(--space-8);
      }
    }

    .coll-card {
      position: relative;
      display: flex;
      align-items: end;
      aspect-ratio: 4 / 5;
      padding: var(--space-6);
      color: var(--c-white);
      overflow: hidden;
      isolation: isolate;

      img {
        position: absolute;
        inset: 0;
        z-index: -2;
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 1.4s var(--ease-out);
      }

      &::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        background: linear-gradient(180deg, rgb(8 17 27 / 0) 45%, rgb(8 17 27 / 0.72));
      }

      &::before {
        content: "";
        position: absolute;
        inset: var(--space-4);
        border: 1px solid rgb(255 255 255 / 0.5);
        opacity: 0;
        transform: scale(1.04);
        transition: opacity var(--dur-base), transform var(--dur-slow) var(--ease-out);
      }

      .num {
        position: absolute;
        top: var(--space-5);
        left: var(--space-6);
        font-family: var(--font-serif);
        font-size: 1.4rem;
        font-style: italic;
      }

      strong {
        display: block;
        font-family: var(--font-serif);
        font-size: clamp(1.5rem, 1.1rem + 1vw, 2.1rem);
        font-weight: 500;
        line-height: 1.1;
      }

      em {
        display: block;
        margin-top: var(--space-2);
        font-size: var(--fs-sm);
        font-style: normal;
        opacity: 0.85;
      }

      &:hover {
        img {
          transform: scale(1.07);
        }

        &::before {
          opacity: 1;
          transform: none;
        }
      }
    }

    /* =========================================================
       Material notes
       ========================================================= */
    .materials {
      background: var(--color-surface-soft);
      overflow: hidden;
    }

    .mat-stage {
      position: relative;
      min-height: 460px;
    }

    .mat-panel {
      display: none;
      grid-template-columns: 1fr 1fr;
      align-items: center;
      gap: clamp(2rem, 1rem + 4vw, 6rem);
      animation: mat-in var(--dur-slow) var(--ease-out);
    }

    .mat-stone {
      position: relative;
      display: grid;
      place-items: center;
      aspect-ratio: 1;
      width: min(100%, 440px);
      margin-inline: auto;

      &::before {
        content: "";
        position: absolute;
        inset: 6%;
        background: radial-gradient(circle at 50% 40%, var(--c-white), var(--c-mist-100) 70%);
        border: 1px solid var(--color-border);
        border-radius: 50%;
      }

      &::after {
        content: "";
        position: absolute;
        bottom: 12%;
        width: 46%;
        height: 7%;
        background: radial-gradient(closest-side, rgb(8 17 27 / 0.22), transparent);
        filter: blur(4px);
      }

      img {
        position: relative;
        z-index: 1;
        width: 56%;
        animation: stone-float 6s var(--ease-soft) infinite, mat-pop var(--dur-slow) var(--ease-out);
      }
    }

    @keyframes stone-float {
      0%, 100% { translate: 0 -8px; rotate: -4deg; }
      50% { translate: 0 6px; rotate: 6deg; }
    }

    @keyframes mat-pop {
      from { scale: 0.6; opacity: 0; }
    }

    @keyframes mat-in {
      from {
        opacity: 0;
        transform: translateY(20px);
      }
    }

    .mat-copy {
      max-width: 520px;

      .mat-count {
        font-family: var(--font-serif);
        font-size: 1.2rem;
        font-style: italic;
        color: var(--color-muted);
      }

      .mat-label {
        margin-top: var(--space-4);
        font-size: var(--fs-2xs);
        font-weight: 600;
        letter-spacing: 0.22em;
        text-transform: uppercase;
        color: var(--color-accent);
      }

      h3 {
        margin-top: var(--space-2);
        font-family: var(--font-serif);
        font-size: var(--fs-2xl);
        font-weight: 600;
        line-height: 1;
      }

      .mat-kw {
        margin-top: var(--space-3);
        font-family: var(--font-serif);
        font-size: 1.35rem;
        font-style: italic;
        color: var(--color-text-soft);
      }

      .mat-desc {
        margin-top: var(--space-4);
        color: var(--color-text-soft);
      }

      .mat-actions {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--space-6);
        margin-top: var(--space-6);
      }
    }

    .mat-picker {
      display: grid;
      grid-template-columns: repeat(10, 1fr);
      gap: var(--space-2);
      margin-top: var(--space-7);
      padding-top: var(--space-6);
      border-top: 1px solid var(--color-border);

      label {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: var(--space-2);
        padding: var(--space-3) var(--space-1);
        font-size: var(--fs-2xs);
        letter-spacing: 0.06em;
        text-align: center;
        color: var(--color-muted);
        cursor: pointer;
        transition: color var(--dur-fast);

        img {
          width: 52px;
          height: 52px;
          filter: drop-shadow(0 6px 8px rgb(8 17 27 / 0.15));
          transition: transform var(--dur-base) var(--ease-out);
        }

        &:hover {
          color: var(--color-text);

          img {
            transform: translateY(-6px) rotate(12deg);
          }
        }
      }
    }

    /* active bead + panel */
    .mat:has(#bead-0:checked) .mat-panel[data-i="0"],
    .mat:has(#bead-1:checked) .mat-panel[data-i="1"],
    .mat:has(#bead-2:checked) .mat-panel[data-i="2"],
    .mat:has(#bead-3:checked) .mat-panel[data-i="3"],
    .mat:has(#bead-4:checked) .mat-panel[data-i="4"],
    .mat:has(#bead-5:checked) .mat-panel[data-i="5"],
    .mat:has(#bead-6:checked) .mat-panel[data-i="6"],
    .mat:has(#bead-7:checked) .mat-panel[data-i="7"],
    .mat:has(#bead-8:checked) .mat-panel[data-i="8"],
    .mat:has(#bead-9:checked) .mat-panel[data-i="9"] {
      display: grid;
    }

    #bead-0:checked ~ .mat-picker label[for="bead-0"],
    #bead-1:checked ~ .mat-picker label[for="bead-1"],
    #bead-2:checked ~ .mat-picker label[for="bead-2"],
    #bead-3:checked ~ .mat-picker label[for="bead-3"],
    #bead-4:checked ~ .mat-picker label[for="bead-4"],
    #bead-5:checked ~ .mat-picker label[for="bead-5"],
    #bead-6:checked ~ .mat-picker label[for="bead-6"],
    #bead-7:checked ~ .mat-picker label[for="bead-7"],
    #bead-8:checked ~ .mat-picker label[for="bead-8"],
    #bead-9:checked ~ .mat-picker label[for="bead-9"] {
      color: var(--color-text);
      font-weight: 600;

      img {
        transform: translateY(-6px) scale(1.12);
        outline: 1px solid var(--c-ink-950);
        outline-offset: 5px;
        border-radius: 50%;
      }
    }

    .mat:has(input:focus-visible) .mat-picker {
      outline: 2px solid var(--color-accent);
      outline-offset: 6px;
    }

    /* =========================================================
       Community – auto reel
       ========================================================= */
    .community {
      --cycle: 24s;

      overflow: hidden;
    }

    .cr {
      --w: clamp(240px, 22vw, 330px);
      --g: clamp(14px, 1.6vw, 24px);
      --h: calc(var(--w) * 1);
      --h-on: calc(var(--w) * 1.25);

      position: relative;
      padding-block: var(--space-3) var(--space-5);
      overflow: hidden;
      mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);

      &:hover :is(.cr-track, .cr-card .media) {
        animation-play-state: paused;
      }
    }

    .cr-track {
      display: flex;
      align-items: center;
      gap: var(--g);
      width: max-content;
      margin-left: calc(50vw - var(--w) / 2 - 2 * (var(--w) + var(--g)));
      animation: cr-move var(--cycle) var(--ease-soft) infinite alternate;
    }

    .cr-card {
      flex: 0 0 var(--w);
      background: var(--c-white);
      border: 1px solid var(--color-border);
      transition: box-shadow var(--dur-base) var(--ease-out);

      .media {
        position: relative;
        display: grid;
        place-items: center;
        height: var(--h);
        overflow: hidden;
        background: var(--product-bg);
        animation: var(--anim, none) var(--cycle) var(--ease-soft) infinite alternate;

        /* white product shots take on the light-grey backdrop */
        img {
          width: 82%;
          height: 82%;
          object-fit: contain;
          mix-blend-mode: multiply;
          transition: transform 1.2s var(--ease-out);
        }
      }

      /* heart "cut-out" – adds the design to Likes */
      .like {
        --liked: 0;

        position: absolute;
        top: var(--space-3);
        right: var(--space-3);
        display: grid;
        place-items: center;
        width: 40px;
        height: 40px;
        color: var(--c-ink-950);
        cursor: pointer;
        transition: transform var(--dur-base) var(--ease-out);

        svg {
          width: 22px;
          height: 22px;
          fill: rgb(23 25 29 / calc(var(--liked)));
          stroke: currentColor;
          stroke-width: 1.4;
          transition: fill var(--dur-fast);
        }

        &::after {
          content: "Saved";
          position: absolute;
          top: 100%;
          right: 0;
          padding: 2px 8px;
          font-size: var(--fs-2xs);
          letter-spacing: 0.08em;
          white-space: nowrap;
          color: var(--c-white);
          background: var(--c-ink-950);
          opacity: calc(var(--liked));
          transform: translateY(calc((1 - var(--liked)) * 6px));
          transition: opacity var(--dur-base), transform var(--dur-base) var(--ease-out);
        }

        &:hover {
          transform: scale(1.12);
        }
      }

      .remix {
        position: absolute;
        left: 50%;
        bottom: var(--space-3);
        display: inline-flex;
        align-items: center;
        gap: var(--space-2);
        padding: 8px 14px;
        font-size: var(--fs-2xs);
        font-weight: 600;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        white-space: nowrap;
        color: var(--c-white);
        background: var(--c-ink-950);
        border-radius: var(--radius-pill);
        opacity: 0;
        transform: translate(-50%, 10px);
        transition: opacity var(--dur-base), transform var(--dur-base) var(--ease-out);

        .icon {
          width: 13px;
          height: 13px;
        }
      }

      .info {
        padding: var(--space-4);
        border-top: 1px solid var(--color-border);
      }

      .row {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: var(--space-3);
      }

      h3 {
        font-family: var(--font-sans);
        font-size: var(--fs-base);
        font-weight: 500;
        line-height: 1.3;
      }

      .price {
        font-size: var(--fs-sm);
        font-weight: 600;
        white-space: nowrap;
      }

      .meta {
        margin-top: 2px;
        font-size: var(--fs-xs);
        color: var(--color-muted);
      }

      .acts {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--space-2);
        margin-top: var(--space-3);

        > * {
          display: inline-flex;
          align-items: center;
          justify-content: center;
          gap: 6px;
          height: 36px;
          font-size: var(--fs-xs);
          font-weight: 500;
          border: 1px solid var(--color-border);
          transition: background var(--dur-fast), border-color var(--dur-fast);

          &:hover {
            border-color: var(--c-ink-950);
          }
        }

        .icon {
          width: 15px;
          height: 15px;
        }

        .buy {
          color: var(--c-white);
          background: var(--c-ink-950);
          border-color: var(--c-ink-950);

          &:hover {
            background: var(--c-ink-800);
          }
        }
      }

      &:hover {
        box-shadow: var(--shadow-md);

        .media img {
          transform: scale(1.05) rotate(-4deg);
        }

        .remix {
          opacity: 1;
          transform: translate(-50%, 0);
        }
      }
    }

    .cr-dots {
      display: flex;
      justify-content: center;
      gap: 8px;
      margin-top: var(--space-4);

      i {
        width: 22px;
        height: 2px;
        background: var(--c-mist-300);
        border-radius: 2px;
        animation: var(--anim-dot) var(--cycle) var(--ease-soft) infinite alternate;
      }
    }

    .community:has(.cr:hover) .cr-dots i {
      animation-play-state: paused;
    }

    @keyframes cr-move {
      0.00%, 6.00% { transform: translateX(calc(-0 * (var(--w) + var(--g)))); }
      14.00%, 26.00% { transform: translateX(calc(-1 * (var(--w) + var(--g)))); }
      34.00%, 46.00% { transform: translateX(calc(-2 * (var(--w) + var(--g)))); }
      54.00%, 66.00% { transform: translateX(calc(-3 * (var(--w) + var(--g)))); }
      74.00%, 86.00% { transform: translateX(calc(-4 * (var(--w) + var(--g)))); }
      94.00%, 100.00% { transform: translateX(calc(-5 * (var(--w) + var(--g)))); }
    }

    @keyframes cr-on-0 { 0.00%, 6.00% { height: var(--h-on); } 10.00%, 100% { height: var(--h); } }
    @keyframes cr-on-1 { 0%, 10.00% { height: var(--h); } 14.00%, 26.00% { height: var(--h-on); } 30.00%, 100% { height: var(--h); } }
    @keyframes cr-on-2 { 0%, 30.00% { height: var(--h); } 34.00%, 46.00% { height: var(--h-on); } 50.00%, 100% { height: var(--h); } }
    @keyframes cr-on-3 { 0%, 50.00% { height: var(--h); } 54.00%, 66.00% { height: var(--h-on); } 70.00%, 100% { height: var(--h); } }
    @keyframes cr-on-4 { 0%, 70.00% { height: var(--h); } 74.00%, 86.00% { height: var(--h-on); } 90.00%, 100% { height: var(--h); } }
    @keyframes cr-on-5 { 0%, 90.00% { height: var(--h); } 94.00%, 100.00% { height: var(--h-on); } }
    @keyframes cr-dot-0 { 0.00%, 6.00% { background: var(--c-ink-950); width: 40px; } 10.00%, 100% { background: var(--c-mist-300); width: 22px; } }
    @keyframes cr-dot-1 { 0%, 10.00% { background: var(--c-mist-300); width: 22px; } 14.00%, 26.00% { background: var(--c-ink-950); width: 40px; } 30.00%, 100% { background: var(--c-mist-300); width: 22px; } }
    @keyframes cr-dot-2 { 0%, 30.00% { background: var(--c-mist-300); width: 22px; } 34.00%, 46.00% { background: var(--c-ink-950); width: 40px; } 50.00%, 100% { background: var(--c-mist-300); width: 22px; } }
    @keyframes cr-dot-3 { 0%, 50.00% { background: var(--c-mist-300); width: 22px; } 54.00%, 66.00% { background: var(--c-ink-950); width: 40px; } 70.00%, 100% { background: var(--c-mist-300); width: 22px; } }
    @keyframes cr-dot-4 { 0%, 70.00% { background: var(--c-mist-300); width: 22px; } 74.00%, 86.00% { background: var(--c-ink-950); width: 40px; } 90.00%, 100% { background: var(--c-mist-300); width: 22px; } }
    @keyframes cr-dot-5 { 0%, 90.00% { background: var(--c-mist-300); width: 22px; } 94.00%, 100.00% { background: var(--c-ink-950); width: 40px; } }
    .cr-card:nth-child(3) { --anim: cr-on-0; }
    .cr-dots i:nth-child(1) { --anim-dot: cr-dot-0; }
    .cr-card:nth-child(4) { --anim: cr-on-1; }
    .cr-dots i:nth-child(2) { --anim-dot: cr-dot-1; }
    .cr-card:nth-child(5) { --anim: cr-on-2; }
    .cr-dots i:nth-child(3) { --anim-dot: cr-dot-2; }
    .cr-card:nth-child(6) { --anim: cr-on-3; }
    .cr-dots i:nth-child(4) { --anim-dot: cr-dot-3; }
    .cr-card:nth-child(7) { --anim: cr-on-4; }
    .cr-dots i:nth-child(5) { --anim-dot: cr-dot-4; }
    .cr-card:nth-child(8) { --anim: cr-on-5; }
    .cr-dots i:nth-child(6) { --anim-dot: cr-dot-5; }
    body:has(#like-0:checked) label[for="like-0"] { --liked: 1; }
    body:has(#like-1:checked) label[for="like-1"] { --liked: 1; }
    body:has(#like-2:checked) label[for="like-2"] { --liked: 1; }
    body:has(#like-3:checked) label[for="like-3"] { --liked: 1; }
    body:has(#like-4:checked) label[for="like-4"] { --liked: 1; }
    body:has(#like-5:checked) label[for="like-5"] { --liked: 1; }

    @media (max-width: 700px) {
      .cr {
        --w: 70vw;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .cr-track {
        animation: none;
        transform: none;
      }
    }

    /* likes counter in the header (CSS counter over the like toggles) */
    body {
      counter-reset: likes;
    }

    .like-input {
      position: fixed;
      top: 0;
      left: 0;

      &:checked {
        counter-increment: likes;
      }
    }

    .header-tools .tool-likes .count::after {
      content: counter(likes);
    }

    /* =========================================================
       Story (dark)
       ========================================================= */
    .story {
      --silver: #bfc5cc;
      --slate: #657383;
      --charcoal: #17191d;

      position: relative;
      padding-block: var(--section-y);
      color: #eef1f4;
      background: linear-gradient(90deg, var(--silver) 0%, var(--slate) 50%, var(--charcoal) 100%);
      overflow: hidden;

      .eyebrow {
        color: var(--silver);
      }
    }

    .story-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      align-items: center;
      gap: clamp(2rem, 1rem + 5vw, 7rem);
    }

    .story-media {
      position: relative;
      aspect-ratio: 1 / 1.1;

      img {
        position: absolute;
        object-fit: cover;
      }

      .s1 {
        top: 0;
        left: 0;
        width: 78%;
        height: 92%;
        border-radius: var(--radius-arch);
      }

      .s2 {
        right: 0;
        bottom: 0;
        width: 42%;
        aspect-ratio: 3 / 4;
        border: 8px solid var(--slate);
        animation: float 8s var(--ease-soft) infinite;
      }
    }

    .story-copy {
      .kicker {
        display: flex;
        align-items: center;
        gap: var(--space-3);
        margin-bottom: var(--space-6);
        font-family: var(--font-serif);
        font-size: var(--fs-sm);
        letter-spacing: 0.04em;
        color: var(--silver);

        i {
          font-style: normal;
          font-size: 0.7rem;
          color: var(--silver);
        }
      }

      .serif {
        margin-top: var(--space-4);
        font-size: var(--fs-xl);
        line-height: 1.2;
        color: #f4f6f8;

        em {
          display: block;
          color: var(--silver);
        }
      }

      .lead {
        max-width: 46ch;
        margin-top: var(--space-5);
        font-size: var(--fs-sm);
        color: rgb(238 241 244 / 0.7);
      }

      .pillars {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        margin: var(--space-6) 0 var(--space-7);
        border-top: 1px solid rgb(191 197 204 / 0.25);

        li {
          padding: var(--space-4) var(--space-3) 0 0;
        }

        b {
          display: block;
          font-family: var(--font-serif);
          font-size: var(--fs-sm);
          font-weight: 400;
          color: var(--silver);
        }

        span {
          font-size: var(--fs-sm);
        }
      }
    }

    /* =========================================================
       Gift
       ========================================================= */
    .gift-card {
      display: grid;
      grid-template-columns: 1fr 1fr;
      background: var(--color-surface-soft);
      border: 1px solid var(--color-border);
    }

    .gift-media {
      min-height: 420px;
      overflow: hidden;

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 1.4s var(--ease-out);
      }
    }

    .gift-card:hover .gift-media img {
      transform: scale(1.05);
    }

    .gift-copy {
      align-self: center;
      padding: clamp(2rem, 1rem + 4vw, 5rem);

      .serif {
        margin-top: var(--space-4);
        font-size: var(--fs-xl);
      }

      > p {
        margin-top: var(--space-4);
        color: var(--color-text-soft);
      }

      .small {
        font-size: var(--fs-xs);
        color: var(--color-muted);

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

    .sub-form {
      display: flex;
      margin-top: var(--space-6);
      border: 1px solid var(--c-ink-950);
      background: var(--c-white);

      input {
        flex: 1;
        min-width: 0;
        padding: 0 var(--space-5);
        background: none;
        border: 0;
        outline: 0;
      }

      .btn {
        border-width: 0;
      }
    }

    /* =========================================================
       Footer
       ========================================================= */
    .site-footer {
      position: relative;
      padding-top: var(--space-9);
      background: var(--c-mist-50);
      border-top: 1px solid var(--color-border);
      overflow: hidden;

      .footer-top {
        display: grid;
        grid-template-columns: 1.6fr repeat(3, 1fr);
        gap: var(--space-7);
        padding-bottom: var(--space-8);
      }

      .footer-brand {
        img {
          width: 222px;
          height: auto;
          aspect-ratio: var(--logo-ratio);
        }

        .serif {
          max-width: 26ch;
          margin-top: var(--space-5);
          font-size: var(--fs-base);
          line-height: 1.5;
        }
      }

      .socials {
        display: flex;
        gap: var(--space-2);
        margin-top: var(--space-6);

        a {
          display: grid;
          place-items: center;
          width: 42px;
          height: 42px;
          border: 1px solid var(--color-border);
          border-radius: 50%;
          transition: background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast);

          &:hover {
            color: var(--c-white);
            background: var(--c-ink-950);
            border-color: var(--c-ink-950);
          }
        }

        .icon {
          width: 18px;
          height: 18px;
        }
      }

      h2 {
        margin-bottom: var(--space-4);
        font-size: var(--fs-2xs);
        font-weight: 600;
        letter-spacing: 0.22em;
        text-transform: uppercase;

        &.mt {
          margin-top: var(--space-6);
        }
      }

      .footer-col li a {
        display: inline-block;
        padding: 4px 0;
        font-size: var(--fs-sm);
        color: var(--color-text-soft);
        transition: color var(--dur-fast), transform var(--dur-base) var(--ease-out);

        &:hover {
          color: var(--color-text);
          transform: translateX(4px);
        }
      }

      .footer-bottom {
        position: relative;
        z-index: 1;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        gap: var(--space-4);
        padding-block: var(--space-5);
        font-size: var(--fs-xs);
        color: var(--color-muted);
        border-top: 1px solid var(--color-border);
      }

      .legal {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-5);

        a:hover {
          color: var(--color-text);
        }
      }

      .footer-word {
        display: block;
        margin-bottom: -0.2em;
        font-family: var(--font-serif);
        font-size: clamp(5rem, 1rem + 18vw, 19rem);
        font-weight: 500;
        line-height: 0.9;
        letter-spacing: 0.06em;
        text-align: center;
        color: var(--color-text);
        user-select: none;
      }
    }

    /* =========================================================
       Section responsive
       ========================================================= */
    @media (max-width: 1024px) {
      .coll-grid,
      .story-grid,
      .gift-card {
        grid-template-columns: 1fr;
      }

      .coll-intro {
        position: static;
      }

      .mat-panel {
        grid-template-columns: 1fr;
        text-align: center;

        .mat-copy {
          margin-inline: auto;
        }

        .mat-actions {
          justify-content: center;
        }
      }

      .mat-stone {
        width: min(70vw, 320px);
      }

      .mat-picker {
        grid-template-columns: none;
        grid-auto-flow: column;
        grid-auto-columns: 92px;
        overflow-x: auto;
        scrollbar-width: none;

        &::-webkit-scrollbar {
          display: none;
        }
      }

      .story-media {
        max-width: 560px;
        width: 100%;
        margin-inline: auto;
      }

      .gift-media {
        min-height: 280px;
        max-height: 360px;
      }

      .site-footer .footer-top {
        grid-template-columns: repeat(3, 1fr);

        .footer-brand {
          grid-column: 1 / -1;
        }
      }
    }

    @media (max-width: 560px) {
      .coll-cards {
        grid-template-columns: 1fr;

        > :nth-child(even) {
          margin-top: 0;
        }
      }

      .story-copy .pillars {
        grid-template-columns: 1fr;

        li {
          display: flex;
          gap: var(--space-3);
          padding-block: var(--space-3);
          border-bottom: 1px solid rgb(255 255 255 / 0.1);
        }
      }

      .sub-form {
        flex-direction: column;

        input {
          min-height: 54px;
        }
      }

      .site-footer .footer-top {
        grid-template-columns: 1fr 1fr;
      }
    }

    /* =========================================================
       Subscription popup
       ========================================================= */
    #promo-close {
      position: fixed;
      top: 0;
      left: 0;
    }

    .promo-modal {
      --promo-delay: 2.5s;

      position: fixed;
      inset: 0;
      z-index: var(--z-modal);
      display: grid;
      place-items: center;
      padding: var(--gutter);
      opacity: 0;
      visibility: hidden;
      animation: promo-show 0.6s var(--ease-out) var(--promo-delay) forwards;

      .promo-backdrop {
        position: absolute;
        inset: 0;
        background: rgb(8 17 27 / 0.55);
        backdrop-filter: blur(8px);
        cursor: pointer;
      }

      .promo-dialog {
        position: relative;
        display: grid;
        grid-template-columns: 0.95fr 1.05fr;
        width: min(100%, 920px);
        max-height: calc(100dvh - 2 * var(--gutter));
        overflow: auto;
        background: var(--color-surface);
        box-shadow: 0 50px 120px rgb(8 17 27 / 0.35);
        animation: promo-pop 0.9s var(--ease-out) var(--promo-delay) both;
      }

      .promo-x {
        position: absolute;
        top: var(--space-4);
        right: var(--space-4);
        z-index: 2;
        display: grid;
        place-items: center;
        width: 42px;
        height: 42px;
        border: 1px solid var(--color-border);
        border-radius: 50%;
        background: var(--color-surface);
        cursor: pointer;
        transition: transform var(--dur-base) var(--ease-out), background var(--dur-fast), color var(--dur-fast);

        .icon {
          width: 18px;
          height: 18px;
        }

        &:hover {
          color: var(--c-white);
          background: var(--c-ink-950);
          transform: rotate(90deg);
        }
      }
    }

    .promo-media {
      position: relative;
      display: flex;
      align-items: end;
      padding: var(--space-5);
      overflow: hidden;
      isolation: isolate;

      img {
        position: absolute;
        inset: 0;
        z-index: -2;
        width: 100%;
        height: 100%;
        object-fit: cover;
        animation: ken-burns 14s ease-out var(--promo-delay) both;
      }

      &::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        background: linear-gradient(180deg, rgb(8 17 27 / 0) 50%, rgb(8 17 27 / 0.55));
      }
    }

    .promo-offer {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 100%;
      padding: var(--space-5);
      text-align: center;
      background: rgb(255 255 255 / 0.82);
      border: 1px solid rgb(255 255 255 / 0.9);
      backdrop-filter: blur(14px);

      span {
        font-size: var(--fs-2xs);
        font-weight: 600;
        letter-spacing: 0.24em;
        text-transform: uppercase;
        color: var(--color-accent);
      }

      strong {
        display: flex;
        align-items: start;
        font-family: var(--font-serif);
        font-size: clamp(4rem, 3rem + 4vw, 6rem);
        font-weight: 500;
        line-height: 0.95;

        small {
          margin-top: 0.15em;
          font-size: 0.45em;
        }
      }

      em {
        font-family: var(--font-serif);
        font-size: 1.25rem;
        font-style: italic;
        color: var(--color-text-soft);
      }
    }

    .promo-body {
      padding: clamp(2rem, 1.4rem + 2.6vw, 3.5rem);

      .promo-logo {
        width: 150px;
        height: auto;
        aspect-ratio: var(--logo-ratio);
        margin-bottom: var(--space-5);
      }

      .serif {
        margin-top: var(--space-3);
        font-size: clamp(2rem, 1.5rem + 1.8vw, 2.8rem);

        em {
          display: block;
        }
      }

      .intro {
        margin-top: var(--space-4);
        color: var(--color-text-soft);
      }

      .fine {
        margin-top: var(--space-4);
        font-size: var(--fs-2xs);
        line-height: 1.6;
        color: var(--color-muted);

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

      .state-success {
        display: none;
        text-align: center;

        .eyebrow {
          display: flex;
          justify-content: center;
          margin-top: var(--space-5);
        }

        .btn {
          margin-top: var(--space-5);
          cursor: pointer;
        }
      }
    }

    .promo-form {
      display: grid;
      gap: var(--space-3);
      margin-top: var(--space-6);

      .field {
        display: flex;
        align-items: center;
        gap: var(--space-3);
        height: 54px;
        padding: 0 var(--space-4);
        border: 1px solid var(--c-mist-300);
        transition: border-color var(--dur-fast), box-shadow var(--dur-fast);

        .icon {
          width: 18px;
          height: 18px;
          color: var(--color-muted);
        }

        &:focus-within {
          border-color: var(--c-ink-950);
          box-shadow: 0 0 0 3px var(--color-accent-soft);
        }
      }

      input {
        flex: 1;
        min-width: 0;
        height: 100%;
        background: none;
        border: 0;
        outline: 0;
      }
    }

    .no-thanks {
      display: block;
      margin-top: var(--space-3);
      font-size: var(--fs-xs);
      text-align: center;
      color: var(--color-muted);
      text-decoration: underline;
      text-underline-offset: 3px;
      cursor: pointer;

      &:hover {
        color: var(--color-text);
      }
    }

    .promo-trust {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: var(--space-2) var(--space-4);
      margin-top: var(--space-5);
      padding-top: var(--space-4);
      border-top: 1px solid var(--color-border);

      li {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-size: var(--fs-2xs);
        letter-spacing: 0.04em;
        color: var(--color-text-soft);
      }

      .icon {
        width: 14px;
        height: 14px;
        color: var(--color-accent);
      }
    }

    .success-mark {
      display: inline-grid;
      place-items: center;
      width: 68px;
      height: 68px;
      color: var(--c-white);
      background: var(--c-ink-950);
      border-radius: 50%;
      animation: mat-pop 0.7s var(--ease-out) both;

      .icon {
        width: 30px;
        height: 30px;
        stroke-width: 2;
      }
    }

    .coupon {
      display: grid;
      gap: var(--space-1);
      margin-top: var(--space-5);
      padding: var(--space-5);
      background: var(--color-surface-soft);
      border: 1px dashed var(--c-ink-600);

      code {
        font-family: var(--font-serif);
        font-size: var(--fs-xl);
        font-weight: 600;
        letter-spacing: 0.16em;
        user-select: all;
      }

      span {
        font-size: var(--fs-xs);
        color: var(--color-muted);
      }
    }

    /* popup states */
    .promo-modal:has(#welcome:target) {
      animation: none;
      opacity: 1;
      visibility: visible;

      .promo-dialog,
      .promo-media img {
        animation: none;
      }

      .state-form {
        display: none;
      }

      .state-success {
        display: block;
      }
    }

    body:has(#promo-close:checked) {
      .promo-modal {
        opacity: 0 !important;
        visibility: hidden !important;
      }

      .promo-tab {
        transform: none;
      }
    }

    body:has(#promo-close:focus-visible) .promo-x {
      outline: 2px solid var(--color-accent);
      outline-offset: 3px;
    }

    .promo-tab {
      position: fixed;
      left: var(--space-5);
      bottom: var(--space-5);
      z-index: var(--z-float);
      display: inline-flex;
      align-items: center;
      gap: var(--space-2);
      padding: 13px 20px;
      font-size: var(--fs-2xs);
      font-weight: 600;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--c-white);
      background: var(--c-ink-950);
      box-shadow: var(--shadow-lg);
      cursor: pointer;
      transform: translateX(calc(-100% - 40px));
      transition: transform var(--dur-slow) var(--ease-out);

      .icon {
        width: 16px;
        height: 16px;
        animation: wiggle 3.5s ease-in-out infinite;
      }
    }

    @keyframes promo-show {
      to {
        opacity: 1;
        visibility: visible;
      }
    }

    @keyframes promo-pop {
      from {
        opacity: 0;
        transform: translateY(40px) scale(0.97);
      }
    }

    @keyframes wiggle {
      0%, 80%, 100% { rotate: 0deg; }
      85% { rotate: -14deg; }
      90% { rotate: 12deg; }
      95% { rotate: -6deg; }
    }

    @media (max-width: 760px) {
      .promo-modal {
        place-items: end center;
        padding: 0;

        .promo-dialog {
          grid-template-columns: 1fr;
          max-height: 94dvh;
          animation-name: promo-sheet;
        }
      }

      .promo-media {
        min-height: 170px;
        padding: var(--space-4);

        .promo-offer {
          flex-direction: row;
          justify-content: center;
          gap: var(--space-3);
          padding: var(--space-3);

          strong {
            font-size: 3rem;
          }

          span {
            display: none;
          }
        }
      }

      .promo-body {
        padding: var(--space-6) var(--space-5);

        .promo-logo {
          display: none;
        }
      }

      .promo-tab {
        left: var(--space-3);
        bottom: var(--space-3);
      }
    }

    @keyframes promo-sheet {
      from {
        transform: translateY(100%);
      }
    }

    /* back to top */
    .to-top {
      position: fixed;
      right: var(--space-5);
      bottom: var(--space-5);
      z-index: calc(var(--z-float) - 1);
      display: grid;
      place-items: center;
      width: 48px;
      height: 48px;
      color: var(--c-ink-950);
      background: rgb(255 255 255 / 0.9);
      border: 1px solid var(--color-border);
      border-radius: 50%;
      box-shadow: var(--shadow-md);
      backdrop-filter: blur(8px);
      transition: background var(--dur-fast), color var(--dur-fast);

      .icon {
        width: 18px;
        height: 18px;
        transform: rotate(-90deg);
      }

      &:hover {
        color: var(--c-white);
        background: var(--c-ink-950);
      }
    }

    @supports (animation-timeline: scroll()) {
      .to-top {
        animation: to-top-in linear both;
        animation-timeline: scroll();
        animation-range: 0 700px;
      }

      @keyframes to-top-in {
        from {
          opacity: 0;
          visibility: hidden;
          transform: translateY(16px);
        }

        to {
          opacity: 1;
          visibility: visible;
          transform: none;
        }
      }
    }

    @media (prefers-reduced-motion: reduce) {
      *,
      *::before,
      *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
      }

      .hero {
        :is(.slide, .copy > *, .media, .media .frame img) {
          animation: none !important;
        }

        .slide:first-child {
          opacity: 1;
          visibility: visible;
        }

        .slide:not(:first-child),
        .progress {
          display: none;
        }
      }
    }

    /* ---------- demo cart: toast + badge bump ---------- */
    .toast {
      position: fixed;
      left: 50%;
      bottom: var(--space-6);
      z-index: 200;
      display: flex;
      align-items: center;
      gap: var(--space-3);
      max-width: calc(100vw - 2 * var(--gutter));
      padding: var(--space-3) var(--space-5);
      font-size: var(--fs-sm);
      color: var(--c-white);
      background: var(--c-ink-950);
      box-shadow: var(--shadow-lg);
      opacity: 0;
      visibility: hidden;
      transform: translate(-50%, 16px);
      transition: opacity var(--dur-base), transform var(--dur-base) var(--ease-out), visibility var(--dur-base);

      .icon {
        width: 18px;
        height: 18px;
        padding: 3px;
        color: var(--c-ink-950);
        background: var(--c-white);
        border-radius: 50%;
        stroke-width: 2.6;
      }

      &.is-on {
        opacity: 1;
        visibility: visible;
        transform: translate(-50%, 0);
      }
    }

    .header-tools .count.is-bump {
      animation: badge-bump 0.5s var(--ease-out);
    }

    @keyframes badge-bump {
      0% { transform: scale(1); }
      40% { transform: scale(1.45); }
      100% { transform: scale(1); }
    }