* {
      box-sizing: border-box;
    }

    html,
    body {
      margin: 0;
      min-height: 100%;
      overscroll-behavior-y: none;
      background-color: #899aa3;
    }

    body {
      min-height: var(--page-depth);
      overflow-x: hidden;
      background:
        radial-gradient(140% 20% at 50% 46%, rgba(238, 198, 132, 0.42) 0%, rgba(238, 198, 132, 0.16) 22%, rgba(238, 198, 132, 0.04) 48%, rgba(238, 198, 132, 0) 72%),
        linear-gradient(180deg, #7f909b 0%, #9caab0 34%, #d6d4c8 47%, #c2cbcd 57%, #778896 100%);
      font-family: sans-serif;
      --page-depth: 520vh;
      --max-scale: 1.1;
      /* Quick vertical controls */
      --intro-top: clamp(14.4rem, 39.6vh, 21.6rem);
      --cloud-top: 53%;
      --cloud-right-top: 63%;
      --scroll-hint-bottom: clamp(7rem, 16vh, 10rem);
      --panel-top: 51.5%;
      --reveal-bottom: clamp(0rem, 2vh, 1rem);
      --reveal-actions-bottom: clamp(1.5rem, 4vh, 3rem);
      --secondary-reveal-lift: 2rem;
      --progress-top: clamp(7rem, 14vh, 9.5rem);
      --progress-bottom: clamp(3rem, 8vh, 5rem);
      --progress-side: clamp(0.5rem, 1.8vw, 1.2rem);
      --progress-track-inset: 0.35rem;
    }

    @media (min-width: 1024px) {
      body {
        --page-depth: 620vh;
      }
    }

    body.is-loading {
      overflow: hidden;
      touch-action: none;
    }

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

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

    .site-loader {
      position: fixed;
      inset: 0;
      z-index: 100;
      display: grid;
      place-items: center;
      padding: 1.5rem;
      background:
        radial-gradient(circle at top, rgba(255, 214, 144, 0.18), transparent 42%),
        linear-gradient(180deg, rgba(15, 17, 21, 0.96), rgba(8, 9, 12, 0.98));
      opacity: 1;
      visibility: visible;
      transition:
        opacity 320ms ease,
        visibility 320ms ease;
    }

    .site-loader.is-hidden {
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
    }

    .site-loader-panel {
      width: min(100%, 20rem);
      display: grid;
      gap: 0.9rem;
      padding: 1.35rem 1.2rem 1.1rem;
      border: 1px solid rgba(255, 255, 255, 0.16);
      border-radius: 1.5rem;
      background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02)),
        rgba(255, 255, 255, 0.03);
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 1.4rem 3rem rgba(0, 0, 0, 0.32);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
    }

    .site-loader-brand {
      margin: 0;
      color: rgba(255, 255, 255, 0.96);
      font-size: clamp(1.35rem, 1rem + 1vw, 1.8rem);
      font-weight: 400;
      letter-spacing: 0.24em;
      text-transform: uppercase;
    }

    .site-loader-copy,
    .site-loader-progress {
      margin: 0;
      color: rgba(255, 255, 255, 0.72);
      font-size: 0.85rem;
      line-height: 1.35;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .site-loader-progress {
      color: rgba(255, 255, 255, 0.92);
      text-align: right;
    }

    .site-loader-track {
      position: relative;
      width: 100%;
      height: 0.32rem;
      overflow: hidden;
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.12);
    }

    .site-loader-fill {
      position: absolute;
      inset: 0 auto 0 0;
      width: calc(var(--loader-progress, 0) * 100%);
      border-radius: inherit;
      background: linear-gradient(90deg, rgba(255, 255, 255, 0.72), rgba(255, 220, 154, 0.98));
      transition: width 180ms ease;
    }

    @media (min-width: 821px) {
      .glass-nav {
        position: fixed;
        top: 1.1rem;
        left: 50%;
        z-index: 20;
        width: min(calc(100% - 2rem), 72rem);
        min-height: 4.5rem;
        display: flex;
        align-items: center;
        gap: 1.5rem;
        padding: 0.95rem 1.8rem;
        border: 0;
        border-radius: 999px;
        background: transparent;
        box-shadow: none;
        transform: translateX(-50%);
      }

      .brand {
        color: rgba(255, 255, 255, 0.96);
        font-size: clamp(1.25rem, 1rem + 0.7vw, 1.7rem);
        font-weight: 400;
        letter-spacing: 0.24em;
        text-transform: uppercase;
        white-space: nowrap;
      }

      .nav-links {
        display: flex;
        flex: 1 1 auto;
        min-width: 0;
        align-items: center;
        gap: 1.2rem;
      }

      .nav-links-group {
        display: flex;
        flex: 1 1 auto;
        min-width: 0;
        align-items: center;
        justify-content: center;
        gap: clamp(1rem, 1.8vw, 2.4rem);
        flex-wrap: wrap;
      }

      .nav-links-group a,
      .nav-auth {
        color: rgba(255, 255, 255, 0.9);
        font-size: clamp(0.8rem, 0.65rem + 0.3vw, 0.95rem);
        letter-spacing: 0.18em;
        text-transform: uppercase;
        transition: opacity 180ms ease;
      }

      .nav-links-group a:hover,
      .nav-auth:hover,
      .nav-links-group a[aria-current="page"] {
        opacity: 0.72;
      }

      .nav-auth {
        flex: 0 0 auto;
        white-space: nowrap;
      }
    }

    @media (max-width: 820px) {
      .glass-nav {
        border: 0;
        background: transparent;
        box-shadow: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        isolation: auto;
      }

      .glass-nav::before {
        content: none;
      }

      .nav-backdrop {
        background: linear-gradient(90deg, rgba(8, 10, 13, 0.04) 0%, rgba(8, 10, 13, 0.18) 46%, rgba(8, 10, 13, 0.42) 100%);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
      }

      .nav-links {
        width: min(87vw, 350px);
        gap: 0;
        padding:
          max(5rem, calc(env(safe-area-inset-top, 0px) + 4.5rem))
          1rem
          max(1.1rem, calc(env(safe-area-inset-bottom, 0px) + 0.9rem))
          0.75rem;
        border: 0;
        border-right: 1px solid rgba(255, 255, 255, 0.18);
        border-radius: 0 2rem 2rem 0;
        background: rgba(134, 149, 158, 0.98);
        box-shadow: 18px 0 36px rgba(0, 0, 0, 0.16);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
      }

      .nav-links::before,
      .nav-links::after {
        content: none;
      }

      .nav-drawer-logo {
        display: grid;
        width: min(52vw, 164px);
        margin: 2.85rem auto 4rem;
        justify-items: center;
        pointer-events: none;
      }

      .nav-drawer-logo img {
        width: 100%;
        height: auto;
        display: block;
        object-fit: contain;
        filter: none;
        opacity: 0.92;
      }

      .nav-links-group {
        gap: 0;
      }

      .nav-links-group a,
      .nav-auth {
        padding: 1.08rem 0.7rem;
        border: 0;
        border-radius: 0;
        background: none;
        box-shadow: none;
        color: rgba(255, 255, 255, 0.95);
        font-size: 0.94rem;
        letter-spacing: 0.04em;
      }

      .nav-links-group a:hover,
      .nav-auth:hover,
      .nav-auth[aria-current="page"] {
        background: none;
        opacity: 0.74;
      }

      .nav-links-group a {
        width: 100%;
        border-bottom: 1px solid rgba(255, 255, 255, 0.22);
      }

      .nav-auth {
        width: auto;
        margin-top: auto;
        margin-right: 0.7rem;
        padding: 1.15rem 0 0.3rem;
        align-self: flex-end;
        border-bottom: 0;
        text-align: right;
      }
    }

    .background-layer {
      position: fixed;
      inset: 0;
      z-index: 0;
      overflow: hidden;
      isolation: isolate;
      background:
        linear-gradient(155deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0) 34%),
        radial-gradient(140% 20% at 50% 46%, rgba(243, 202, 132, 0.5) 0%, rgba(243, 202, 132, 0.22) 20%, rgba(243, 202, 132, 0.06) 42%, rgba(243, 202, 132, 0) 68%),
        linear-gradient(180deg, #80919c 0%, #a2b0b5 35%, #dad8cc 47%, #c4cdcf 56%, #768793 100%);
      --section-four-bg-opacity: 0;
      --section-four-bg-scale: 1.05;
      --section-four-bg-shift: 18px;
    }

    .background-layer::after {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      background:
        linear-gradient(180deg,
          rgba(8, 10, 14, 0.06),
          rgba(8, 10, 14, 0.02) 30%,
          rgba(8, 10, 14, 0.12) 72%,
          rgba(8, 10, 14, 0.2) 100%),
        url("GALLARY/4.png") center center / cover no-repeat;
      opacity: var(--section-four-bg-opacity);
      transform: translate3d(0, var(--section-four-bg-shift), 0) scale(var(--section-four-bg-scale));
      transform-origin: center center;
      filter: saturate(0.98) contrast(1.02) brightness(0.98);
      will-change: opacity, transform;
    }

    .page {
      min-height: var(--page-depth);
      position: relative;
      z-index: 1;
    }

    .foreground-shell {
      position: fixed;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      pointer-events: none;
    }

    .foreground-stage {
      position: relative;
      width: calc(50vw / var(--max-scale));
      height: calc(130vh / var(--max-scale));
      display: flex;
      align-items: center;
      justify-content: center;
      transform: scale(2);
      transform-origin: center;
      isolation: isolate;
      will-change: transform;
    }

    .foreground-stage::before {
      content: "";
      position: absolute;
      left: 50%;
      top: 50%;
      width: min(32vw, 18rem);
      aspect-ratio: 0.82;
      border-radius: 50%;
      transform: translate3d(-50%, -42%, 0);
      background:
        radial-gradient(circle at center,
          rgba(246, 220, 164, 0.5) 0%,
          rgba(245, 212, 146, 0.28) 24%,
          rgba(255, 255, 255, 0.12) 42%,
          rgba(245, 212, 146, 0.04) 60%,
          rgba(245, 212, 146, 0) 78%);
      filter: blur(18px);
      opacity: var(--hero-orb-opacity, 0.92);
      animation: heroGlowPulse 6.8s ease-in-out infinite;
      z-index: 0;
      pointer-events: none;
    }

    .foreground-image {
      width: 140%;
      height: 140%;
      max-width: 230vw;
      max-height: 230vh;
      object-fit: contain;
      transform-origin: center;
      display: block;
      user-select: none;
      -webkit-user-drag: none;
      animation: archFloat 6.4s ease-in-out infinite;
      filter: drop-shadow(0 1.2rem 2.4rem rgba(56, 38, 18, 0.18));
    }

    .foreground-picture {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      z-index: 1;
    }

    .reveal-shell {
      position: fixed;
      inset: 0;
      z-index: 2;
      pointer-events: none;
    }

    .intro-shell {
      position: fixed;
      inset: 0;
      z-index: 3;
      display: flex;
      justify-content: center;
      align-items: flex-start;
      pointer-events: none;
    }

    .intro-image {
      width: clamp(14rem, 46vw, 28rem);
      max-width: 74vw;
      margin-top: var(--intro-top);
      height: auto;
      object-fit: contain;
      opacity: 1;
      transform: translate3d(0, 0, 0) scale(1);
      transform-origin: center top;
      will-change: transform, opacity;
      filter: drop-shadow(0 0.75rem 1.5rem rgba(0, 0, 0, 0.14));
    }

    .cloud-shell {
      position: fixed;
      inset: 0;
      z-index: 2;
      pointer-events: none;
    }

    .cloud-image {
      position: absolute;
      display: block;
      top: var(--cloud-top);
      width: clamp(31.4496rem, 67.392vw, 49.4208rem);
      height: auto;
      object-fit: contain;
      opacity: 1;
      will-change: transform, opacity;
      filter: drop-shadow(0 0.75rem 1.5rem rgba(0, 0, 0, 0.1));
      --cloud-layer-opacity: 0.94;
      --cloud-layer-blur: 0px;
    }

    .cloud-image img {
      width: 100%;
      height: auto;
      object-fit: contain;
      display: block;
      user-select: none;
      -webkit-user-drag: none;
      opacity: var(--cloud-layer-opacity);
      filter: blur(var(--cloud-layer-blur));
      transform-origin: center center;
      will-change: transform, opacity, filter;
    }

    .cloud-image-left {
      left: clamp(-0.5rem, 2vw, 1.5rem);
      transform: translate3d(0, 0, 0) scale(1);
      transform-origin: left center;
      --cloud-layer-opacity: 0.98;
      --cloud-layer-blur: 0.4px;
    }

    .cloud-image-right {
      top: var(--cloud-right-top);
      right: clamp(-0.5rem, 2vw, 1.5rem);
      transform: translate3d(0, 0, 0) scaleX(-1) scaleY(1);
      transform-origin: center center;
      --cloud-layer-opacity: 0.76;
      --cloud-layer-blur: 1.8px;
    }

    .cloud-image-left img {
      animation: cloudDriftLeft 10s ease-in-out infinite;
    }

    .cloud-image-right img {
      animation: cloudDriftRight 13s ease-in-out infinite;
    }

    .scroll-hint-shell {
      position: fixed;
      inset: 0;
      z-index: 3;
      display: flex;
      justify-content: center;
      align-items: flex-end;
      pointer-events: none;
    }

    .scroll-hint {
      margin-bottom: var(--scroll-hint-bottom);
      padding: 0;
      color: rgba(255, 255, 255, 0.94);
      font-size: clamp(0.75rem, 1.4vw, 1rem);
      letter-spacing: 0.34em;
      line-height: 1;
      text-transform: uppercase;
      text-align: center;
      white-space: nowrap;
      opacity: 1;
      transform: translate3d(0, 0, 0);
      will-change: transform, opacity;
      text-shadow: 0 0.35rem 1rem rgba(0, 0, 0, 0.22);
    }

    @keyframes heroGlowPulse {
      0%,
      100% {
        transform: translate3d(-50%, -42%, 0) scale(0.96);
      }

      50% {
        transform: translate3d(-50%, -42%, 0) scale(1.04);
      }
    }

    @keyframes archFloat {
      0%,
      100% {
        transform: translate3d(0, 0, 0) scale(1);
      }

      50% {
        transform: translate3d(0, -10px, 0) scale(1.018);
      }
    }

    @keyframes cloudDriftLeft {
      0%,
      100% {
        transform: translate3d(0, 0, 0) scale(1.01);
        opacity: 0.96;
      }

      50% {
        transform: translate3d(14px, -8px, 0) scale(1.06);
        opacity: 0.88;
      }
    }

    @keyframes cloudDriftRight {
      0%,
      100% {
        transform: translate3d(0, 0, 0) scale(1.05);
        opacity: 0.68;
      }

      50% {
        transform: translate3d(-18px, 10px, 0) scale(1.11);
        opacity: 0.84;
      }
    }

    @keyframes sliderAuraPulse {
      0%,
      100% {
        opacity: 0.82;
        transform: translate3d(0, 0, 0) scale(0.96);
      }

      50% {
        opacity: 1;
        transform: translate3d(0, -6px, 0) scale(1.04);
      }
    }

    @keyframes sliderAuraPulseCentered {
      0%,
      100% {
        opacity: 0.82;
        transform: translateX(-50%) scale(0.96);
      }

      50% {
        opacity: 1;
        transform: translateX(-50%) translateY(-6px) scale(1.04);
      }
    }

    @keyframes sliderHeroFloat {
      0%,
      100% {
        transform: translate3d(0, 0, 0) rotate(-1.15deg) scale(1);
      }

      50% {
        transform: translate3d(0, -10px, 0) rotate(1.15deg) scale(1.02);
      }
    }

    @keyframes sliderHeroFloatBat {
      0%,
      100% {
        transform: translate3d(0, 0, 0) rotate(-2deg) scale(1);
      }

      50% {
        transform: translate3d(0, -10px, 0) rotate(0.4deg) scale(1.015);
      }
    }

    @keyframes sliderDotHint {
      0%,
      100% {
        transform: translateY(0) scale(1);
        opacity: 0.58;
      }

      50% {
        transform: translateY(-0.18rem) scale(1.12);
        opacity: 0.9;
      }
    }

    @keyframes sliderDotActivePulse {
      0%,
      100% {
        transform: translateY(0) scale(1);
        box-shadow:
          0 0 0 0.08rem rgba(255, 255, 255, 0.18),
          0 0 1rem rgba(255, 225, 181, 0.18);
      }

      50% {
        transform: translateY(-0.08rem) scale(1.03);
        box-shadow:
          0 0 0 0.16rem rgba(255, 255, 255, 0.12),
          0 0 1.25rem rgba(255, 225, 181, 0.32);
      }
    }

    @keyframes revealActionsShimmer {
      0% {
        opacity: 0;
        transform: translate3d(-140%, 0, 0) skewX(-24deg);
      }

      18% {
        opacity: 0.68;
      }

      42% {
        opacity: 0;
        transform: translate3d(220%, 0, 0) skewX(-24deg);
      }

      100% {
        opacity: 0;
        transform: translate3d(220%, 0, 0) skewX(-24deg);
      }
    }

    @keyframes craftGlowPulse {
      0%,
      100% {
        opacity: 0.72;
        transform: translateX(-50%) scale(0.96);
      }

      50% {
        opacity: 0.9;
        transform: translateX(-50%) translateY(-5px) scale(1.03);
      }
    }

    @keyframes craftCardFloat {
      0%,
      100% {
        transform: scale(1.045) translate3d(0, 0, 0);
      }

      50% {
        transform: scale(1.06) translate3d(0, -8px, 0);
      }
    }

    .panel-shell {
      position: fixed;
      inset: 0;
      z-index: 2;
      pointer-events: none;
    }

    .panel-image {
      position: absolute;
      left: 50%;
      top: var(--panel-top);
      width: clamp(13.5rem, 16.5vw, 18rem);
      max-width: 26vw;
      max-height: 56vh;
      height: auto;
      opacity: 0;
      transform: translate(-50%, -50%) translateY(28px) scale(0.96);
      transform-origin: center center;
      will-change: transform, opacity;
      filter: drop-shadow(0 0.9rem 1.8rem rgba(0, 0, 0, 0.18));
    }

    .panel-copy {
      display: grid;
      justify-items: center;
      gap: clamp(0.24rem, 0.52vh, 0.4rem);
      padding: clamp(0.25rem, 0.55vw, 0.45rem);
      color: rgba(255, 255, 255, 0.96);
      font-family: "Lato", Arial, Helvetica, sans-serif;
      text-align: center;
      text-shadow: 0 0.45rem 0.9rem rgba(0, 0, 0, 0.18);
    }

    .panel-copy-title {
      margin: 0;
      font-family: "Lato", Arial, Helvetica, sans-serif;
      font-size: clamp(1.05rem, 1.55vw, 1.45rem);
      font-weight: 300;
      letter-spacing: 0.2em;
      line-height: 1;
      text-transform: uppercase;
    }

    .panel-copy p {
      margin: 0;
      max-width: 24em;
      font-family: "Lato", Arial, Helvetica, sans-serif;
      font-size: clamp(0.43rem, 0.52vw, 0.55rem);
      font-weight: 400;
      letter-spacing: 0.09em;
      line-height: 1.26;
      text-transform: uppercase;
    }

    .panel-copy-arabic {
      display: block;
      margin-block: 0.12rem -0.08rem;
      font-family: "Lato", Arial, Helvetica, sans-serif;
      font-size: clamp(1rem, 1.7vw, 1.45rem);
      font-weight: 300;
      letter-spacing: 0;
      line-height: 1;
      text-transform: none;
    }

    .reveal-image {
      position: absolute;
      display: block;
      left: 50%;
      bottom: var(--reveal-bottom);
      z-index: 2;
      width: clamp(13rem, 26vw, 24rem);
      max-width: 42vw;
      max-height: 74vh;
      height: auto;
      object-fit: contain;
      opacity: 0;
      transform: translate3d(-50%, 84px, 0) scale(0.94);
      transform-origin: center bottom;
      will-change: transform, opacity;
      pointer-events: none;
      filter: drop-shadow(0 1rem 2rem rgba(0, 0, 0, 0.22));
    }

    .reveal-image img {
      width: 100%;
      height: auto;
      object-fit: contain;
      display: block;
      user-select: none;
      -webkit-user-drag: none;
    }

    #revealImageSecondary {
      display: none;
      bottom: calc(var(--reveal-bottom) + var(--secondary-reveal-lift));
      width: clamp(10.2rem, 20.4vw, 16.7rem);
      max-width: 31.8vw;
    }

    .reveal-stage-accent {
      position: absolute;
      inset: 0;
      z-index: 1;
      display: none;
      opacity: 0;
      transform: translate3d(0, 24px, 0);
      will-change: transform, opacity;
      pointer-events: none;
    }

    .reveal-stage-accent::before,
    .reveal-stage-accent::after {
      content: "";
      position: absolute;
      pointer-events: none;
    }

    .reveal-stage-accent::before {
      left: 50%;
      bottom: clamp(5rem, 10vh, 7rem);
      width: min(58vw, 48rem);
      height: clamp(13rem, 28vh, 20rem);
      border-radius: 50%;
      background:
        radial-gradient(circle at 50% 50%,
          rgba(255, 232, 186, 0.22),
          rgba(255, 232, 186, 0.1) 34%,
          rgba(126, 145, 151, 0.08) 58%,
          transparent 74%);
      filter: blur(24px);
      transform: translateX(-50%);
    }

    .reveal-ghost-word {
      position: absolute;
      left: 50%;
      top: clamp(18rem, 39vh, 26rem);
      color: rgba(255, 255, 255, 0.12);
      font-family: "Times New Roman", Georgia, serif;
      font-size: clamp(4.2rem, 8.6vw, 10rem);
      font-weight: 400;
      letter-spacing: 0.08em;
      line-height: 0.82;
      text-transform: uppercase;
      transform: translateX(-50%);
      white-space: nowrap;
      text-shadow: 0 1rem 2.6rem rgba(78, 96, 104, 0.12);
    }

    .reveal-product-frame {
      position: absolute;
      left: 50%;
      bottom: clamp(4.1rem, 8vh, 6.1rem);
      width: min(52vw, 44rem);
      height: clamp(18rem, 37vh, 27rem);
      border: 1px solid rgba(255, 255, 255, 0.12);
      border-inline-color: rgba(255, 239, 211, 0.2);
      border-radius: 50% 50% 0 0 / 28% 28% 0 0;
      background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 44%),
        linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.05), transparent);
      transform: translateX(-50%);
    }

    .reveal-product-frame::before,
    .reveal-product-frame::after {
      content: "";
      position: absolute;
      top: 12%;
      bottom: 0;
      width: 1px;
      background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.22), transparent);
    }

    .reveal-product-frame::before {
      left: 31%;
    }

    .reveal-product-frame::after {
      right: 31%;
    }

    .reveal-material-board {
      position: absolute;
      right: clamp(7.5rem, 17vw, 20rem);
      top: clamp(13.2rem, 30vh, 20rem);
      width: clamp(12.5rem, 15vw, 17.5rem);
      display: grid;
      gap: 0.65rem;
      color: rgba(255, 255, 255, 0.9);
      text-shadow: 0 0.35rem 0.9rem rgba(0, 0, 0, 0.13);
      pointer-events: auto;
    }

    .reveal-material-title {
      margin: 0;
      color: rgba(255, 239, 218, 0.78);
      font-size: clamp(0.58rem, 0.76vw, 0.7rem);
      font-weight: 800;
      letter-spacing: 0.22em;
      line-height: 1;
      text-transform: uppercase;
    }

    .reveal-material-swatches {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 0.48rem;
    }

    .reveal-swatch {
      aspect-ratio: 1;
      border: 1px solid rgba(255, 255, 255, 0.22);
      border-radius: 0.45rem;
      background:
        radial-gradient(circle at 30% 28%, rgba(255, 255, 255, 0.24), transparent 28%),
        var(--swatch-color);
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.14),
        0 0.45rem 0.9rem rgba(0, 0, 0, 0.1);
    }

    .reveal-swatch-black {
      --swatch-color: linear-gradient(135deg, #171717, #45413d);
    }

    .reveal-swatch-brown {
      --swatch-color: linear-gradient(135deg, #5d351f, #b46d3e);
    }

    .reveal-swatch-tan {
      --swatch-color: linear-gradient(135deg, #9f7348, #d7ad75);
    }

    .reveal-swatch-olive {
      --swatch-color: linear-gradient(135deg, #3e4637, #7b8568);
    }

    .reveal-material-note {
      margin: 0;
      color: rgba(255, 255, 255, 0.66);
      font-size: clamp(0.58rem, 0.72vw, 0.68rem);
      line-height: 1.28;
    }

    .reveal-material-link {
      justify-self: start;
      display: inline-flex;
      align-items: center;
      max-width: 100%;
      gap: 0.42rem;
      min-height: 2rem;
      margin-top: 0.1rem;
      padding: 0.5rem 0.74rem;
      border: 1px solid rgba(255, 255, 255, 0.22);
      border-radius: 999px;
      background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.17), rgba(255, 255, 255, 0.07)),
        rgba(42, 48, 44, 0.22);
      color: rgba(255, 255, 255, 0.9);
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.14),
        0 0.55rem 1.2rem rgba(38, 48, 52, 0.14);
      font-size: clamp(0.52rem, 0.62vw, 0.62rem);
      font-weight: 800;
      letter-spacing: 0.16em;
      line-height: 1;
      text-decoration: none;
      text-shadow: none;
      text-transform: uppercase;
      white-space: normal;
      transition:
        transform 220ms ease,
        border-color 220ms ease,
        background 220ms ease;
    }

    .reveal-material-link::after {
      content: ">";
      font-size: 0.72em;
      line-height: 1;
      transform: translateY(-0.03rem);
    }

    .reveal-material-link:hover,
    .reveal-material-link:focus-visible {
      border-color: rgba(255, 255, 255, 0.42);
      background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0.1)),
        rgba(42, 48, 44, 0.3);
      outline: none;
      transform: translate3d(0.12rem, 0, 0);
    }

    .reveal-ui {
      position: absolute;
      inset-inline: 0;
      z-index: 4;
      display: none;
      opacity: 0;
      transform: translate3d(0, 26px, 0);
      will-change: transform, opacity;
      pointer-events: none;
    }

    .reveal-ui {
      top: clamp(6.2rem, 12vh, 8rem);
      justify-content: center;
      padding-inline: 1.2rem;
      color: rgba(255, 255, 255, 0.96);
      text-shadow: 0 0.32rem 0.9rem rgba(0, 0, 0, 0.12);
    }

    .reveal-ui-panel {
      width: min(100%, 22rem);
      display: grid;
      justify-items: center;
      gap: 0.45rem;
      padding: 0;
      border: 0;
      background: transparent;
      box-shadow: none;
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
      text-align: center;
    }

    .reveal-eyebrow {
      margin: 0;
      color: rgba(255, 239, 215, 0.72);
      font-size: clamp(0.56rem, 0.75vw, 0.68rem);
      font-weight: 700;
      letter-spacing: 0.22em;
      line-height: 1.2;
      text-transform: uppercase;
    }

    .reveal-heading {
      margin: 0;
      color: rgba(255, 255, 255, 0.98);
      font-family: "Times New Roman", Georgia, serif;
      font-size: clamp(1.65rem, 2.6vw, 3rem);
      font-weight: 400;
      letter-spacing: 0.04em;
      line-height: 0.96;
      text-transform: uppercase;
    }

    .reveal-summary {
      width: min(100%, 18rem);
      margin: 0;
      color: rgba(255, 255, 255, 0.7);
      font-size: clamp(0.72rem, 0.9vw, 0.84rem);
      line-height: 1.42;
    }

    .reveal-stats {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0.48rem;
      width: min(100%, 19rem);
      margin-top: 0.2rem;
      color: rgba(255, 245, 231, 0.82);
      font-size: clamp(0.58rem, 0.78vw, 0.68rem);
      font-weight: 700;
      letter-spacing: 0.14em;
      line-height: 1;
      text-transform: uppercase;
    }

    .reveal-stat {
      display: inline-flex;
      align-items: center;
      gap: 0.48rem;
      white-space: nowrap;
    }

    .reveal-stat + .reveal-stat::before {
      content: "";
      width: 0.24rem;
      height: 0.24rem;
      border-radius: 999px;
      background: rgba(255, 235, 205, 0.58);
    }

    .reveal-detail-panel {
      position: absolute;
      right: clamp(7.5rem, 17vw, 20rem);
      top: clamp(22rem, 48vh, 30rem);
      z-index: 4;
      width: clamp(12.5rem, 15vw, 17.5rem);
      display: none;
      grid-template-columns: 1fr 1fr;
      gap: 0.7rem;
      opacity: 0;
      transform: translate3d(0, 24px, 0);
      will-change: transform, opacity;
      pointer-events: none;
    }

    .reveal-detail-item {
      display: grid;
      gap: 0.2rem;
      min-height: 4.4rem;
      padding: 0.75rem 0.78rem;
      border: 1px solid rgba(255, 255, 255, 0.18);
      border-radius: 0.7rem;
      background: rgba(255, 255, 255, 0.07);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
      color: rgba(255, 255, 255, 0.88);
      text-shadow: 0 0.35rem 0.8rem rgba(0, 0, 0, 0.12);
    }

    .reveal-detail-item strong {
      font-size: clamp(0.64rem, 0.8vw, 0.76rem);
      letter-spacing: 0.16em;
      line-height: 1;
      text-transform: uppercase;
    }

    .reveal-detail-item span {
      color: rgba(255, 255, 255, 0.62);
      font-size: clamp(0.68rem, 0.82vw, 0.78rem);
      line-height: 1.35;
    }

    .craft-shell {
      position: absolute;
      inset: 0;
      z-index: 3;
      display: flex;
      justify-content: center;
      align-items: flex-start;
      isolation: isolate;
      overflow: hidden;
      opacity: 0;
      transform: translate3d(0, 42px, 0) scale(0.96);
      will-change: transform, opacity;
      pointer-events: none;
    }

    .craft-stage {
      position: relative;
      isolation: isolate;
      z-index: 1;
      width: min(92vw, 26rem);
      margin-top: clamp(4.8rem, 10vh, 7rem);
      display: grid;
      justify-items: center;
      gap: clamp(1rem, 2.2vh, 1.55rem);
      margin-inline: auto;
    }

    .craft-stage::before,
    .craft-stage::after {
      content: "";
      position: absolute;
      left: 50%;
      pointer-events: none;
      transform: translateX(-50%);
    }

    .craft-stage::before {
      top: 4.4rem;
      width: min(100%, 23.8rem);
      height: clamp(12rem, 28vh, 15.6rem);
      border-radius: 50%;
      background:
        radial-gradient(circle at 50% 40%,
          rgba(255, 222, 166, 0.24),
          rgba(255, 220, 170, 0.14) 28%,
          rgba(160, 184, 196, 0.12) 58%,
          transparent 76%);
      filter: blur(26px);
      opacity: 0.8;
      z-index: -2;
      animation: craftGlowPulse 8s ease-in-out infinite;
    }

    .craft-stage::after {
      top: 14.2rem;
      width: min(84%, 16.8rem);
      height: clamp(4.2rem, 10vh, 6rem);
      border-radius: 50%;
      background: radial-gradient(closest-side,
        rgba(255, 218, 150, 0.18),
        rgba(132, 158, 176, 0.08) 58%,
        transparent 80%);
      filter: blur(18px);
      opacity: 0.7;
      z-index: -1;
    }

    .craft-quote {
      width: min(100%, 18.6rem);
      margin: 0;
      color: rgba(248, 244, 238, 0.96);
      font-size: clamp(0.98rem, 1.8vw, 1.22rem);
      font-weight: 500;
      line-height: 1.18;
      letter-spacing: -0.012em;
      text-align: center;
      text-shadow: 0 0.35rem 0.85rem rgba(0, 0, 0, 0.12);
      transition:
        opacity 220ms ease,
        transform 220ms ease;
    }

    .craft-quote.is-transitioning {
      opacity: 0.72;
      transform: translateY(0.14rem);
    }

    .craft-carousel {
      position: relative;
      width: 100%;
      display: grid;
      justify-items: center;
      gap: clamp(0.35rem, 1.1vh, 0.85rem);
    }

    .craft-description {
      width: min(100%, 20.6rem);
      margin-top: clamp(0.4rem, 1vh, 0.7rem);
      min-height: 6.6rem;
      padding: 1rem 1.1rem 1.05rem;
      border: 1px solid rgba(255, 255, 255, 0.16);
      border-radius: 1.2rem;
      background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.04)),
        rgba(17, 10, 8, 0.22);
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        0 1rem 2.1rem rgba(0, 0, 0, 0.18);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      text-align: left;
      pointer-events: auto;
    }

    .craft-description.has-action {
      min-height: 8.9rem;
    }

    .craft-description-label {
      margin: 0 0 0.45rem;
      color: rgba(255, 232, 202, 0.86);
      font-size: 0.7rem;
      font-weight: 600;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      transition:
        opacity 220ms ease,
        transform 220ms ease;
    }

    .craft-description-text {
      margin: 0;
      color: rgba(247, 242, 236, 0.94);
      font-size: clamp(0.9rem, 1.35vw, 1rem);
      line-height: 1.55;
      text-shadow: 0 0.3rem 0.8rem rgba(0, 0, 0, 0.14);
      transition:
        opacity 220ms ease,
        transform 220ms ease;
    }

    .craft-description.is-transitioning .craft-description-text {
      opacity: 0.72;
      transform: translateY(0.14rem);
    }

    .craft-description.is-transitioning .craft-description-label {
      opacity: 0.72;
      transform: translateY(0.14rem);
    }

    .craft-description-action {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      margin-top: 0.95rem;
      padding: 0.72rem 1rem;
      border: 1px solid rgba(255, 238, 211, 0.38);
      border-radius: 999px;
      background:
        linear-gradient(180deg, rgba(255, 236, 206, 0.18), rgba(255, 255, 255, 0.08)),
        rgba(255, 255, 255, 0.06);
      color: rgba(255, 245, 231, 0.96);
      font-size: 0.82rem;
      font-weight: 600;
      letter-spacing: 0.14em;
      line-height: 1;
      text-transform: uppercase;
      text-decoration: none;
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        0 0.55rem 1.2rem rgba(0, 0, 0, 0.14);
      transition:
        transform 220ms ease,
        box-shadow 220ms ease,
        background 220ms ease,
        opacity 220ms ease;
      pointer-events: auto;
    }

    .craft-description-action:hover,
    .craft-description-action:focus-visible {
      transform: translateY(-1px);
      background:
        linear-gradient(180deg, rgba(255, 236, 206, 0.24), rgba(255, 255, 255, 0.1)),
        rgba(255, 255, 255, 0.08);
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.14),
        0 0.75rem 1.45rem rgba(0, 0, 0, 0.16);
      outline: none;
    }

    .craft-description-action[hidden] {
      display: none;
    }

    .craft-viewport {
      position: relative;
      width: min(100%, 22rem);
      height: clamp(16.8rem, 35vh, 21rem);
      margin-inline: auto;
      overflow: hidden;
      isolation: isolate;
      pointer-events: auto;
      touch-action: pan-y;
    }

    .craft-backdrop {
      position: absolute;
      inset: -2rem;
      z-index: 0;
      pointer-events: none;
    }

    .craft-backdrop::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 2;
      background:
        radial-gradient(circle at 50% 44%,
          rgba(255, 255, 255, 0.08),
          rgba(255, 255, 255, 0) 34%),
        linear-gradient(180deg,
          rgba(7, 10, 14, 0.2),
          rgba(7, 10, 14, 0.08) 22%,
          rgba(7, 10, 14, 0.12) 62%,
          rgba(7, 10, 14, 0.28));
    }

    .craft-backdrop-image {
      position: absolute;
      inset: 0;
      opacity: 0;
      transform: scale(1.08);
      background-image: var(--craft-bg-image);
      background-size: cover;
      background-position: center center;
      filter: blur(10px) saturate(0.92) brightness(0.64);
      transition:
        opacity 420ms ease,
        transform 760ms cubic-bezier(0.22, 1, 0.36, 1),
        filter 420ms ease;
      will-change: opacity, transform, filter;
    }

    .craft-backdrop-image.is-active {
      opacity: 1;
      transform: scale(1.02);
      filter: blur(8px) saturate(0.96) brightness(0.66);
    }

    .craft-backdrop-image[data-index="0"] {
      background-position: 60% center;
    }

    .craft-backdrop-image[data-index="1"] {
      background-position: center center;
    }

    .craft-backdrop-image[data-index="2"] {
      background-position: 56% center;
    }

    .craft-track {
      position: relative;
      width: 100%;
      height: 100%;
      z-index: 1;
      transform: translate3d(var(--craft-drag-offset, 0px), 0, 0);
      transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
      --craft-card-width: min(61vw, 13.6rem);
      --craft-side-offset: clamp(4.95rem, 16.2vw, 5.85rem);
      --craft-side-scale: 0.8;
      --craft-hidden-scale: 0.72;
      --craft-side-y: 0.45rem;
      --craft-hidden-y: 0.98rem;
      will-change: transform;
    }

    .craft-track.is-dragging {
      transition: none;
      cursor: grabbing;
    }

    .craft-track.is-dragging .craft-slide {
      transition: none;
    }

    .craft-slide {
      position: absolute;
      top: 0;
      left: 50%;
      margin: 0;
      width: var(--craft-card-width);
      height: 100%;
      border-radius: 1.35rem;
      overflow: hidden;
      opacity: 0;
      transform: translate3d(-50%, 2rem, 0) scale(0.9);
      transform-origin: center center;
      transition:
        transform 760ms cubic-bezier(0.22, 1, 0.36, 1),
        opacity 440ms ease,
        box-shadow 320ms ease,
        filter 320ms ease;
      box-shadow:
        0 1.35rem 2.6rem rgba(0, 0, 0, 0.2),
        0 0 0 1px rgba(255, 255, 255, 0.08);
      background: rgba(255, 255, 255, 0.06);
      will-change: transform, opacity;
    }

    .craft-slide::after {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: inherit;
      background:
        linear-gradient(180deg,
          rgba(255, 255, 255, 0.16),
          transparent 18%,
          transparent 78%,
          rgba(0, 0, 0, 0.12));
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        inset 0 -1px 0 rgba(255, 232, 190, 0.08);
      pointer-events: none;
    }

    .craft-slide img {
      width: 100%;
      height: 100%;
      display: block;
      object-fit: cover;
      object-position: center center;
      transform: scale(1.05);
      transition:
        transform 760ms cubic-bezier(0.22, 1, 0.36, 1),
        filter 360ms ease,
        opacity 360ms ease;
    }

    .craft-slide.is-active {
      opacity: 1;
      z-index: 3;
      transform: translate3d(-50%, 0, 0) scale(1);
      box-shadow:
        0 1.8rem 3.2rem rgba(0, 0, 0, 0.22),
        0 0 0 1px rgba(255, 255, 255, 0.1);
    }

    .craft-slide.is-prev,
    .craft-slide.is-next {
      opacity: 0.92;
      z-index: 2;
      cursor: pointer;
    }

    .craft-slide.is-prev {
      transform: translate3d(calc(-50% - var(--craft-side-offset)), var(--craft-side-y), 0) scale(var(--craft-side-scale));
    }

    .craft-slide.is-next {
      transform: translate3d(calc(-50% + var(--craft-side-offset)), var(--craft-side-y), 0) scale(var(--craft-side-scale));
    }

    .craft-slide.is-prev img,
    .craft-slide.is-next img {
      filter: saturate(0.88) brightness(0.86) blur(0.02rem);
      opacity: 0.96;
    }

    .craft-slide.is-prev[data-index="0"] img,
    .craft-slide.is-hidden-left[data-index="0"] img {
      object-position: 26% center;
    }

    .craft-slide.is-next[data-index="0"] img,
    .craft-slide.is-hidden-right[data-index="0"] img {
      object-position: 74% center;
    }

    .craft-slide.is-hidden-left,
    .craft-slide.is-hidden-right {
      opacity: 0;
      z-index: 0;
    }

    .craft-slide.is-hidden-left {
      transform: translate3d(calc(-50% - (var(--craft-side-offset) * 1.22)), var(--craft-hidden-y), 0) scale(var(--craft-hidden-scale));
    }

    .craft-slide.is-hidden-right {
      transform: translate3d(calc(-50% + (var(--craft-side-offset) * 1.22)), var(--craft-hidden-y), 0) scale(var(--craft-hidden-scale));
    }

    .craft-slide.is-hidden-left img,
    .craft-slide.is-hidden-right img {
      filter: blur(0.16rem) saturate(0.76) brightness(0.72);
      opacity: 0.74;
    }

    .craft-slide.is-active[data-index="2"] img {
      object-position: 46% center;
    }

    .craft-shell[data-active="true"] .craft-slide.is-active img {
      animation: craftCardFloat 7.8s ease-in-out infinite;
    }

    .slider-shell {
      position: absolute;
      inset: 0;
      z-index: 3;
      display: flex;
      justify-content: center;
      align-items: flex-start;
      opacity: 0;
      transform: translate3d(0, 40px, 0);
      will-change: transform, opacity;
      pointer-events: none;
    }

    .slider-stage {
      position: relative;
      isolation: isolate;
      width: min(92vw, 26rem);
      margin-top: clamp(4.8rem, 10vh, 7rem);
      display: grid;
      justify-items: center;
      gap: clamp(1rem, 2.2vh, 1.55rem);
      margin-inline: auto;
    }

    .slider-stage::before,
    .slider-stage::after {
      content: "";
      position: absolute;
      left: 50%;
      pointer-events: none;
      transform: translateX(-50%);
    }

    .slider-stage::before {
      top: 4.4rem;
      width: min(100%, 23.8rem);
      height: clamp(12rem, 28vh, 15.6rem);
      border-radius: 50%;
      background:
        radial-gradient(circle at 50% 40%,
          rgba(255, 222, 166, 0.24),
          rgba(255, 220, 170, 0.14) 28%,
          rgba(160, 184, 196, 0.12) 58%,
          transparent 74%);
      filter: blur(26px);
      opacity: 0.8;
      z-index: -2;
      animation: craftGlowPulse 8s ease-in-out infinite;
    }

    .slider-stage::after {
      top: 14.2rem;
      width: min(84%, 16.8rem);
      height: clamp(4.2rem, 10vh, 6rem);
      border-radius: 50%;
      background:
        radial-gradient(closest-side,
          rgba(255, 218, 150, 0.18),
          rgba(132, 158, 176, 0.08) 58%,
          transparent 80%);
      filter: blur(18px);
      opacity: 0.7;
      z-index: -1;
    }

    .slider-title {
      margin: 0;
      color: rgba(255, 255, 255, 0.96);
      font-family: "Times New Roman", Georgia, serif;
      width: min(100%, 18.6rem);
      font-size: clamp(1.95rem, 3.4vw, 3rem);
      font-weight: 400;
      letter-spacing: 0.04em;
      line-height: 0.92;
      text-transform: uppercase;
      text-align: center;
      text-decoration: none;
      text-shadow:
        0 0.65rem 1.3rem rgba(0, 0, 0, 0.18),
        0 0 1.3rem rgba(255, 221, 176, 0.12);
      position: relative;
      top: 0;
      margin-bottom: 0;
      transition:
        transform 260ms cubic-bezier(0.22, 1, 0.36, 1),
        text-shadow 260ms ease;
    }

    .slider-title:hover,
    .slider-title:focus-visible {
      transform: translate3d(0, -2px, 0);
      text-shadow:
        0 0.85rem 1.5rem rgba(0, 0, 0, 0.22),
        0 0 1.6rem rgba(255, 221, 176, 0.18);
      outline: none;
    }

    .slider-viewport {
      position: relative;
      width: min(100%, 21.1rem);
      height: clamp(16rem, 33vh, 20rem);
      overflow: hidden;
      pointer-events: auto;
      isolation: isolate;
      touch-action: pan-y;
      margin-inline: auto;
    }

    .slider-viewport::before,
    .slider-viewport::after {
      content: none;
    }

    .slider-track {
      position: relative;
      width: 100%;
      height: 100%;
      z-index: 1;
      --slider-card-width: min(58vw, 14rem);
      --slider-side-offset: clamp(5.75rem, 16vw, 6.5rem);
      --slider-side-scale: 0.9;
      --slider-hidden-scale: 0.82;
    }

    .slider-slide {
      position: absolute;
      top: 0;
      left: 50%;
      width: var(--slider-card-width);
      height: 100%;
      display: block;
      border-radius: 2rem;
      overflow: hidden;
      opacity: 0;
      pointer-events: none;
      transform: translate3d(-50%, 2rem, 0) scale(0.9);
      transform-origin: center center;
      transition:
        transform 760ms cubic-bezier(0.22, 1, 0.36, 1),
        opacity 440ms ease,
        box-shadow 320ms ease,
        filter 320ms ease;
      box-shadow:
        0 1.35rem 2.6rem rgba(0, 0, 0, 0.2),
        0 0 0 1px rgba(255, 255, 255, 0.08);
      background: rgba(255, 255, 255, 0.06);
      will-change: transform, opacity;
    }

    .slider-slide::before {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: inherit;
      background:
        linear-gradient(180deg,
          rgba(255, 255, 255, 0.16),
          transparent 18%,
          transparent 78%,
          rgba(0, 0, 0, 0.12));
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        inset 0 -1px 0 rgba(255, 232, 190, 0.08);
      pointer-events: none;
    }

    .slider-slide img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      user-select: none;
      -webkit-user-drag: none;
      transform: scale(1.05);
      transition:
        transform 760ms cubic-bezier(0.22, 1, 0.36, 1),
        filter 360ms ease,
        opacity 360ms ease;
    }

    .slider-slide.is-active {
      opacity: 1;
      z-index: 3;
      pointer-events: auto;
      transform: translate3d(-50%, 0, 0) scale(1);
      box-shadow:
        0 1.8rem 3.2rem rgba(0, 0, 0, 0.22),
        0 0 0 1px rgba(255, 255, 255, 0.1);
    }

    .slider-slide.is-active::before {
      opacity: 1;
    }

    .slider-slide.is-active img {
      animation: craftCardFloat 7.8s ease-in-out infinite;
    }

    .slider-slide.is-prev,
    .slider-slide.is-next {
      opacity: 0.94;
      z-index: 2;
      pointer-events: auto;
      cursor: pointer;
    }

    .slider-slide.is-prev {
      transform: translate3d(calc(-50% - var(--slider-side-offset)), 0.5rem, 0) scale(var(--slider-side-scale));
    }

    .slider-slide.is-next {
      transform: translate3d(calc(-50% + var(--slider-side-offset)), 0.5rem, 0) scale(var(--slider-side-scale));
    }

    .slider-slide.is-prev img,
    .slider-slide.is-next img {
      filter: saturate(0.88) brightness(0.9) blur(0.01rem);
      opacity: 0.98;
    }

    .slider-slide.is-hidden-left,
    .slider-slide.is-hidden-right {
      opacity: 0;
      z-index: 0;
    }

    .slider-slide.is-hidden-left {
      transform: translate3d(calc(-50% - (var(--slider-side-offset) * 1.22)), 1.05rem, 0) scale(var(--slider-hidden-scale));
    }

    .slider-slide.is-hidden-right {
      transform: translate3d(calc(-50% + (var(--slider-side-offset) * 1.22)), 1.05rem, 0) scale(var(--slider-hidden-scale));
    }

    .slider-slide.is-hidden-left img,
    .slider-slide.is-hidden-right img {
      filter: blur(0.16rem) saturate(0.72) brightness(0.72);
      opacity: 0.76;
    }

    .slider-dots {
      --slider-dot-size: 0.76rem;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0.58rem;
      width: fit-content;
      margin: 0 auto;
      padding: 0.24rem 0.2rem;
      border-radius: 999px;
      background: transparent;
      box-shadow: none;
      pointer-events: auto;
      cursor: pointer;
      touch-action: manipulation;
    }

    .slider-dots::before {
      content: none;
    }

    .slider-dots::after {
      content: none;
    }

    .slider-dots:focus-visible {
      outline: 2px solid rgba(255, 255, 255, 0.9);
      outline-offset: 0.28rem;
    }

    .slider-dot {
      position: relative;
      z-index: 1;
      width: var(--slider-dot-size);
      height: var(--slider-dot-size);
      border-radius: 999px;
      border: 1px solid rgba(255, 255, 255, 0.42);
      background: rgba(255, 255, 255, 0.08);
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.14),
        0 0.3rem 0.7rem rgba(0, 0, 0, 0.08);
      opacity: 1;
      animation: none;
      transition:
        opacity 220ms ease,
        background 220ms ease,
        border-color 220ms ease,
        transform 220ms ease,
        box-shadow 220ms ease;
      pointer-events: auto;
    }

    .slider-dot::before {
      content: "";
      position: absolute;
      inset: 0.17rem;
      border-radius: inherit;
      background: rgba(255, 255, 255, 0.66);
      opacity: 0.44;
      transform: scale(0.72);
      transition:
        opacity 220ms ease,
        transform 220ms ease,
        background 220ms ease;
    }

    .slider-dot.is-near {
      border-color: rgba(255, 255, 255, 0.6);
      background: rgba(255, 255, 255, 0.13);
      transform: scale(1.04);
    }

    .slider-dot.is-near::before {
      opacity: 0.72;
      transform: scale(0.88);
    }

    .slider-dot.is-active {
      border-color: rgba(255, 231, 196, 0.96);
      background:
        linear-gradient(180deg, rgba(255, 236, 207, 0.28), rgba(255, 218, 170, 0.12)),
        rgba(255, 255, 255, 0.14);
      box-shadow:
        0 0 0 0.12rem rgba(255, 237, 211, 0.16),
        0 0.42rem 1rem rgba(255, 212, 144, 0.2);
      transform: scale(1.12);
    }

    .slider-dot.is-active::before {
      background: linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(255, 226, 190, 0.94));
      opacity: 1;
      transform: scale(1);
    }

    .reveal-actions {
      position: absolute;
      left: 50%;
      bottom: var(--reveal-actions-bottom);
      z-index: 4;
      width: clamp(16rem, 32vw, 22rem);
      display: grid;
      grid-template-columns: 1fr 1fr;
      padding: 0.24rem;
      overflow: hidden;
      isolation: isolate;
      border: 1px solid rgba(255, 255, 255, 0.52);
      border-radius: 999px;
      background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.08)),
        rgba(255, 255, 255, 0.08);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.16),
        inset 0 -1px 0 rgba(255, 221, 171, 0.1),
        0 1rem 2rem rgba(0, 0, 0, 0.14);
      opacity: 0;
      transform: translate3d(-50%, 32px, 0) scale(0.96);
      will-change: transform, opacity;
      pointer-events: none;
    }

    .reveal-actions::before,
    .reveal-actions::after {
      content: "";
      position: absolute;
      pointer-events: none;
    }

    .reveal-actions::before {
      inset: 0.18rem;
      border-radius: inherit;
      background: linear-gradient(90deg,
          rgba(255, 255, 255, 0.04),
          rgba(255, 221, 171, 0.12),
          rgba(255, 255, 255, 0.05));
      z-index: 0;
    }

    .reveal-actions::after {
      top: 0;
      bottom: 0;
      left: 0;
      width: 32%;
      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.22), transparent);
      transform: translate3d(-140%, 0, 0) skewX(-24deg);
      opacity: 0;
      z-index: 1;
      animation: revealActionsShimmer 6.4s ease-in-out infinite;
    }

    .reveal-action {
      position: relative;
      z-index: 2;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 0;
      border-radius: 999px;
      background: transparent;
      color: rgba(255, 255, 255, 0.98);
      font: inherit;
      font-size: clamp(1rem, 1.5vw, 1.35rem);
      font-weight: 500;
      letter-spacing: 0.03em;
      line-height: 1;
      padding: 0.95rem 1rem;
      text-decoration: none;
      text-shadow: 0 0.25rem 0.8rem rgba(0, 0, 0, 0.18);
      cursor: pointer;
      transition:
        transform 220ms ease,
        background 220ms ease,
        box-shadow 220ms ease,
        color 220ms ease;
    }

    .reveal-action:hover,
    .reveal-action:focus-visible {
      background: linear-gradient(180deg, rgba(255, 224, 177, 0.18), rgba(255, 255, 255, 0.08));
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.14),
        0 0.4rem 1rem rgba(0, 0, 0, 0.14);
      transform: translateY(-1px);
      outline: none;
    }

    .reveal-action:active {
      transform: translateY(0);
    }

    .reveal-action+.reveal-action {
      border-left: 1px solid rgba(255, 255, 255, 0.28);
    }

    .scroll-progress-shell {
      position: fixed;
      top: var(--progress-top);
      right: var(--progress-side);
      bottom: var(--progress-bottom);
      z-index: 4;
      pointer-events: none;
      --progress-mark-size: 0.58rem;
      --progress-thumb-size: 0.78rem;
    }

    .scroll-progress-rail {
      position: relative;
      width: 1.35rem;
      height: 100%;
    }

    .scroll-progress-rail::before {
      content: "";
      position: absolute;
      top: var(--progress-track-inset);
      bottom: var(--progress-track-inset);
      left: 50%;
      width: 2px;
      border-radius: 999px;
      background: linear-gradient(180deg,
          rgba(255, 255, 255, 0.68),
          rgba(255, 255, 255, 0.5) 30%,
          rgba(255, 255, 255, 0.76) 68%,
          rgba(255, 255, 255, 0.58));
      box-shadow: 0 0 1rem rgba(255, 255, 255, 0.08);
      transform: translateX(-50%);
    }

    .scroll-progress-mark,
    .scroll-progress-thumb {
      position: absolute;
      left: 50%;
      border-radius: 999px;
      transform: translateX(-50%);
    }

    .scroll-progress-mark {
      top: calc(var(--progress-track-inset) + var(--progress-stop) * (100% - (var(--progress-track-inset) * 2) - var(--progress-mark-size)));
      width: var(--progress-mark-size);
      height: var(--progress-mark-size);
      background: rgba(255, 255, 255, 0.86);
      box-shadow: 0 0 0 0.08rem rgba(255, 255, 255, 0.18);
    }

    .scroll-progress-thumb {
      top: var(--progress-track-inset);
      width: var(--progress-thumb-size);
      height: var(--progress-thumb-size);
      border: 1px solid rgba(255, 255, 255, 0.82);
      background: rgba(235, 239, 242, 0.18);
      box-shadow:
        0 0 0 0.07rem rgba(255, 255, 255, 0.16),
        0 0.22rem 0.65rem rgba(0, 0, 0, 0.14);
      will-change: transform;
    }

    @media (min-width: 1024px) {
      .reveal-shell {
        --reveal-scene-width: min(calc(100vw - 8rem), 88rem);
        --reveal-text-width: clamp(15rem, 18vw, 21rem);
        --reveal-side-width: clamp(15rem, 17vw, 20rem);
        --reveal-product-width: clamp(30rem, 42vw, 44rem);
        --reveal-side-top: clamp(13rem, 30vh, 20rem);
        --reveal-text-top: clamp(13rem, 30vh, 22rem);
      }

      #revealImage {
        left: 50%;
        bottom: clamp(-0.75rem, -1vh, -0.3rem);
        width: clamp(17rem, 22vw, 21rem);
        max-width: 34vw;
        max-height: none;
        filter: drop-shadow(0 1.15rem 2.1rem rgba(36, 29, 20, 0.18));
      }

      .slider-shell {
        inset: auto auto auto calc(50% + (var(--reveal-scene-width) / 2) - var(--reveal-side-width));
        top: clamp(8.8rem, 19vh, 12.4rem);
        width: var(--reveal-side-width);
        min-width: 0;
        height: clamp(9.4rem, 21vh, 13rem);
        align-items: flex-start;
        justify-content: flex-start;
        padding: 0;
      }

      .slider-stage {
        width: 100%;
        margin-top: 0;
        gap: 0;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
      }

      .slider-stage::before {
        content: none;
      }

      .slider-stage::after {
        content: none;
      }

      .slider-title {
        display: none;
      }

      .slider-viewport {
        width: 100%;
        height: clamp(8.8rem, 19vh, 12.6rem);
        overflow: visible;
      }

      .slider-track {
        --slider-card-width: clamp(6.4rem, 8vw, 8.6rem);
        --slider-side-offset: clamp(4.1rem, 5.2vw, 5.6rem);
        --slider-side-scale: 0.82;
        --slider-hidden-scale: 0.72;
      }

      .slider-slide {
        height: clamp(8.2rem, 17vh, 11.2rem);
        border-radius: 0;
        overflow: visible;
        background: transparent;
        box-shadow: none;
      }

      .slider-slide::before {
        content: none;
      }

      .slider-slide img {
        object-fit: contain;
        filter: drop-shadow(0 0.9rem 1.25rem rgba(36, 29, 20, 0.28));
      }

      .slider-slide.is-active {
        box-shadow: none;
      }

      .slider-slide.is-prev,
      .slider-slide.is-next {
        opacity: 0.42;
      }

      .slider-slide.is-prev img,
      .slider-slide.is-next img {
        filter:
          blur(0.08rem)
          saturate(0.72)
          brightness(0.72)
          drop-shadow(0 0.8rem 1.2rem rgba(36, 29, 20, 0.22));
      }

      .slider-dots {
        display: none;
      }

      .reveal-ui {
        display: flex;
        inset-inline: auto;
        left: calc(50% - (var(--reveal-scene-width) / 2));
        top: var(--reveal-text-top);
        width: var(--reveal-text-width);
        justify-content: flex-start;
        padding-inline: 0;
      }

      .reveal-ui-panel {
        justify-items: start;
        width: 100%;
        text-align: left;
      }

      .reveal-stage-accent {
        display: block;
      }

      .reveal-stage-accent::before {
        width: min(54vw, 44rem);
      }

      .reveal-ghost-word {
        font-size: clamp(4.6rem, 7.2vw, 8.8rem);
      }

      .reveal-product-frame {
        width: var(--reveal-product-width);
        height: clamp(17rem, 34vh, 25rem);
      }

      .reveal-material-board {
        left: calc(50% - (var(--reveal-scene-width) / 2));
        right: auto;
        top: calc(var(--reveal-text-top) + clamp(11rem, 20vh, 13.5rem));
        width: min(var(--reveal-text-width), 19rem);
      }

      .reveal-detail-panel {
        display: grid;
        left: calc(50% - (var(--reveal-scene-width) / 2));
        right: auto;
        top: calc(var(--reveal-text-top) + clamp(22.4rem, 41vh, 26.6rem));
        width: min(var(--reveal-text-width), 19rem);
      }

      .reveal-actions {
        bottom: clamp(1.9rem, 4.3vh, 2.6rem);
        width: clamp(22rem, 33vw, 25.5rem);
        background:
          linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.08)),
          rgba(78, 84, 80, 0.34);
      }
    }

    @media (min-width: 1024px) and (max-width: 1320px) {
      .reveal-shell {
        --reveal-scene-width: min(calc(100vw - 4rem), 72rem);
        --reveal-text-width: clamp(13.5rem, 21vw, 17rem);
        --reveal-side-width: clamp(12rem, 18vw, 14.5rem);
        --reveal-product-width: clamp(25rem, 42vw, 32rem);
        --reveal-side-top: clamp(12.8rem, 31vh, 18rem);
        --reveal-text-top: clamp(13rem, 31vh, 18.5rem);
      }

      .reveal-heading {
        font-size: clamp(1.55rem, 3vw, 2.35rem);
      }

      .reveal-summary {
        width: min(100%, 15.5rem);
        font-size: 0.72rem;
      }

      .reveal-stats {
        flex-wrap: wrap;
        justify-content: flex-start;
        gap: 0.38rem 0.5rem;
        width: min(100%, 15rem);
        font-size: 0.56rem;
        line-height: 1.25;
      }

      .reveal-stat + .reveal-stat::before {
        content: none;
      }

      .reveal-material-board {
        gap: 0.42rem;
        top: calc(var(--reveal-text-top) + clamp(10.6rem, 21vh, 12.4rem));
        width: min(var(--reveal-text-width), 15.5rem);
      }

      .slider-shell {
        top: clamp(8.8rem, 19vh, 11.4rem);
        height: clamp(8rem, 18vh, 10rem);
      }

      .slider-viewport {
        height: clamp(7.5rem, 16vh, 9.6rem);
      }

      .slider-track {
        --slider-card-width: clamp(5.5rem, 7.8vw, 6.6rem);
        --slider-side-offset: clamp(3.45rem, 5vw, 4.4rem);
      }

      .slider-slide {
        height: clamp(7rem, 15vh, 8.8rem);
      }

      .reveal-material-swatches {
        gap: 0.36rem;
      }

      .reveal-swatch {
        border-radius: 0.36rem;
      }

      .reveal-material-note {
        font-size: 0.58rem;
        line-height: 1.25;
      }

      .reveal-material-link {
        min-height: 1.82rem;
        padding: 0.43rem 0.62rem;
        font-size: 0.5rem;
      }

      .reveal-detail-panel {
        grid-template-columns: 1fr;
        gap: 0.48rem;
        top: calc(var(--reveal-text-top) + clamp(21.2rem, 42vh, 24rem));
        width: min(var(--reveal-text-width), 15.5rem);
      }

      .reveal-detail-item {
        min-height: 0;
        padding: 0.62rem 0.68rem;
      }

      .reveal-detail-item span {
        font-size: 0.66rem;
      }
    }

    @media (min-width: 1600px) {
      .reveal-shell {
        --reveal-scene-width: min(82vw, 94rem);
        --reveal-text-width: clamp(18rem, 18vw, 24rem);
        --reveal-side-width: clamp(17rem, 15vw, 21rem);
        --reveal-product-width: clamp(36rem, 40vw, 48rem);
      }
    }

    @media (max-width: 767px) {
      body {
        --page-depth: 600vh;
        --intro-top: clamp(16.8rem, 45.6vh, 24rem);
        --cloud-top: 52%;
        --cloud-right-top: 59%;
        --scroll-hint-bottom: clamp(6rem, 14vh, 8rem);
        --panel-top: 44.5%;
        --reveal-bottom: -4.85rem;
        --reveal-actions-bottom: calc(env(safe-area-inset-bottom, 0px) + 1.35rem);
        --secondary-reveal-lift: 0rem;
        --progress-top: calc(env(safe-area-inset-top, 0px) + 5.4rem);
        --progress-bottom: calc(env(safe-area-inset-bottom, 0px) + 3.1rem);
        --progress-side: 0.25rem;
        --mobile-slider-card-height: clamp(10.75rem, 51vw, 12.1rem);
        --mobile-slider-shell-top: calc(env(safe-area-inset-top, 0px) + clamp(4.45rem, 15vw, 5.25rem));
        --mobile-slider-shell-bottom: calc(env(safe-area-inset-bottom, 0px) + 6rem);
      }

      .intro-image {
        width: clamp(12rem, 68vw, 20rem);
        max-width: 82vw;
      }

      .foreground-stage {
        width: calc(190vw / var(--max-scale));
        height: calc(190vh / var(--max-scale));
      }

      .foreground-stage::before {
        width: min(58vw, 19rem);
        transform: translate3d(-50%, -34%, 0);
      }

      .foreground-image {
        width: 128%;
        height: 128%;
        max-width: 190vw;
        max-height: 190vh;
      }

      .cloud-image {
        width: clamp(24.7104rem, 93.6vw, 35.9424rem);
      }

      .cloud-image-left {
        left: -0.5rem;
      }

      .cloud-image-right {
        right: -0.5rem;
      }

      .scroll-hint {
        font-size: clamp(0.62rem, 2.8vw, 0.78rem);
        letter-spacing: 0.24em;
        max-width: 82vw;
        white-space: normal;
      }

      .panel-image {
        width: clamp(10.8rem, 48vw, 13.2rem);
        max-width: 54vw;
        max-height: 54vh;
      }

      .panel-copy {
        gap: 0.2rem;
        padding: 0.28rem;
      }

      .panel-copy-title {
        font-size: clamp(0.82rem, 3.35vw, 1.02rem);
        letter-spacing: 0.15em;
      }

      .panel-copy p {
        max-width: 23em;
        font-size: clamp(0.35rem, 1.28vw, 0.42rem);
        letter-spacing: 0.06em;
        line-height: 1.18;
      }

      .panel-copy-arabic {
        font-size: clamp(0.88rem, 4.25vw, 1.08rem);
      }

      .reveal-image {
        width: clamp(10rem, 40vw, 15rem);
        max-width: 56vw;
        max-height: 64vh;
      }

      #revealImage {
        bottom: -9.75rem;
      }

      #revealImageSecondary {
        width: clamp(7.9rem, 29.8vw, 11.5rem);
        max-width: 42vw;
      }

      .reveal-ui {
        top: calc(env(safe-area-inset-top, 0px) + 5rem);
      }

      .reveal-ui-panel {
        width: min(100%, 19rem);
        gap: 0.42rem;
      }

      .reveal-heading {
        font-size: clamp(1.55rem, 8vw, 2.5rem);
      }

      .reveal-summary {
        width: min(100%, 17rem);
        font-size: 0.78rem;
        line-height: 1.35;
      }

      .reveal-stats {
        width: min(100%, 18.5rem);
        gap: 0.32rem;
      }

      .reveal-ui {
        display: none;
      }

      .reveal-stage-accent,
      .reveal-detail-panel {
        display: none;
      }

      .craft-stage {
        width: min(92vw, 22.6rem);
        margin-top: calc(env(safe-area-inset-top, 0px) + 5.35rem);
        gap: 1rem;
      }

      .craft-stage::before {
        top: 4.2rem;
        width: min(100%, 21.2rem);
        height: 12rem;
        filter: blur(19px);
      }

      .craft-stage::after {
        top: 13.2rem;
        width: min(84%, 15.4rem);
        height: 4.6rem;
        filter: blur(15px);
      }

      .craft-quote {
        width: min(100%, 18.3rem);
        font-size: clamp(0.95rem, 3.85vw, 1.08rem);
        line-height: 1.18;
      }

      .craft-carousel {
        gap: 0.25rem;
      }

      .craft-description {
        width: min(100%, 19rem);
        margin-top: 0.55rem;
        min-height: 6.9rem;
        padding: 0.9rem 0.95rem 1rem;
        border-radius: 1.05rem;
        background:
          linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.035)),
          rgba(18, 11, 9, 0.2);
      }

      .craft-description.has-action {
        min-height: 9.4rem;
      }

      .craft-description-label {
        margin-bottom: 0.4rem;
        font-size: 0.66rem;
        letter-spacing: 0.2em;
      }

      .craft-description-text {
        font-size: 0.88rem;
        line-height: 1.5;
      }

      .craft-description-action {
        margin-top: 0.9rem;
        padding: 0.7rem 0.92rem;
        font-size: 0.76rem;
        letter-spacing: 0.12em;
      }

      .craft-viewport {
        width: min(100%, 20.9rem);
        height: clamp(15.6rem, 58vw, 19rem);
      }

      .craft-backdrop-image {
        filter: blur(9px) saturate(0.88) brightness(0.62);
      }

      .craft-backdrop-image.is-active {
        opacity: 1;
        filter: blur(7px) saturate(0.92) brightness(0.64);
      }

      .craft-track {
        --craft-card-width: min(60vw, 12.4rem);
        --craft-side-offset: clamp(4.85rem, 15.8vw, 5.45rem);
        --craft-side-scale: 0.78;
        --craft-hidden-scale: 0.7;
        --craft-side-y: 0.42rem;
        --craft-hidden-y: 0.98rem;
      }

      .craft-slide {
        border-radius: 1.14rem;
      }

      .craft-slide.is-prev,
      .craft-slide.is-next {
        opacity: 0.92;
      }

      .slider-stage {
        width: min(92vw, 22.6rem);
        margin-top: 0;
        gap: 0.72rem;
      }

      .slider-stage::before {
        top: 4.2rem;
        width: min(100%, 21.2rem);
        height: 12rem;
        filter: blur(19px);
      }

      .slider-stage::after {
        top: 13.2rem;
        width: min(84%, 15.4rem);
        height: 4.6rem;
        filter: blur(15px);
      }

      .slider-title {
        width: min(100%, 18.3rem);
        font-size: clamp(1.38rem, 5.4vw, 1.78rem);
        letter-spacing: 0.02em;
        top: 0;
        margin-bottom: 0;
      }

      .slider-shell {
        box-sizing: border-box;
        padding:
          var(--mobile-slider-shell-top)
          0
          var(--mobile-slider-shell-bottom);
      }

      .slider-viewport {
        width: min(100%, 17.75rem);
        height: clamp(13.1rem, 27vh, 15.6rem);
        margin-top: 0;
      }

      .slider-track {
        --slider-card-width: min(52vw, 11.2rem);
        --slider-side-offset: clamp(4.55rem, 14.5vw, 5.25rem);
        --slider-side-scale: 0.9;
        --slider-hidden-scale: 0.82;
      }

      .slider-slide img {
        width: 100%;
        height: 100%;
      }

      .slider-slide.is-active {
        transform: translate3d(-50%, 0, 0) scale(1);
      }

      .slider-slide.is-prev {
        transform: translate3d(calc(-50% - var(--slider-side-offset)), 0.55rem, 0) scale(var(--slider-side-scale));
      }

      .slider-slide.is-next {
        transform: translate3d(calc(-50% + var(--slider-side-offset)), 0.55rem, 0) scale(var(--slider-side-scale));
      }

      .slider-slide.is-hidden-left {
        transform: translate3d(calc(-50% - (var(--slider-side-offset) * 1.22)), 1.05rem, 0) scale(var(--slider-hidden-scale));
      }

      .slider-slide.is-hidden-right {
        transform: translate3d(calc(-50% + (var(--slider-side-offset) * 1.22)), 1.05rem, 0) scale(var(--slider-hidden-scale));
      }

      .slider-dots {
        --slider-dot-size: 0.68rem;
        position: absolute;
        left: 50%;
        bottom: 0.25rem;
        z-index: 5;
        gap: 0.44rem;
        padding: 0.2rem 0.12rem;
        transform: translateX(-50%);
      }

      .reveal-actions {
        width: min(82vw, 19rem);
        padding: 0.22rem;
      }

      .reveal-action {
        font-size: 0.92rem;
        padding: 0.82rem 0.7rem;
      }

      .scroll-progress-rail {
        width: 1.1rem;
      }

      .scroll-progress-shell {
        --progress-mark-size: 0.5rem;
        --progress-thumb-size: 0.64rem;
        --progress-side: calc(env(safe-area-inset-right, 0px) + 0.6rem);
      }
    }

    #productSlider .slider-slide,
    #productSlider .slider-slide::before,
    #productSlider .slider-slide img {
      border-radius: 2rem !important;
    }

    #productSlider .slider-slide {
      overflow: hidden !important;
      clip-path: inset(0 round 2rem);
    }

    #productSlider .slider-slide.is-prev {
      clip-path: inset(0 36% 0 0 round 2rem);
    }

    #productSlider .slider-slide.is-next {
      clip-path: inset(0 0 0 36% round 2rem);
    }

    @media (max-width: 767px) {
      #productSlider .slider-slide,
      #productSlider .slider-slide::before,
      #productSlider .slider-slide img {
        border-radius: 1.9rem !important;
      }

      #productSlider .slider-slide {
        clip-path: inset(0 round 1.9rem);
      }

      #productSlider .slider-slide.is-prev {
        clip-path: inset(0 38% 0 0 round 1.9rem);
      }

      #productSlider .slider-slide.is-next {
        clip-path: inset(0 0 0 38% round 1.9rem);
      }
    }

    body.mobile-performance-lite .site-loader-panel {
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 1rem 2rem rgba(0, 0, 0, 0.24);
    }

    body.mobile-performance-lite .foreground-stage::before,
    body.mobile-performance-lite .foreground-image,
    body.mobile-performance-lite .cloud-image img {
      animation: none;
    }

    body.mobile-performance-lite .foreground-stage::before {
      filter: blur(10px);
      opacity: calc(var(--hero-orb-opacity, 0.92) * 0.72);
    }

    body.mobile-performance-lite .background-layer::after {
      filter: none;
      will-change: opacity, transform;
    }

    body.mobile-performance-lite .foreground-image,
    body.mobile-performance-lite .intro-image,
    body.mobile-performance-lite .cloud-image,
    body.mobile-performance-lite .panel-image,
    body.mobile-performance-lite .reveal-image,
    body.mobile-performance-lite .slider-slide.is-active img {
      filter: none;
    }

    body.mobile-performance-lite .cloud-image img {
      filter: none;
      opacity: 0.84;
    }

    body.mobile-performance-lite .slider-slide.is-prev img,
    body.mobile-performance-lite .slider-slide.is-next img,
    body.mobile-performance-lite .slider-slide.is-hidden-left img,
    body.mobile-performance-lite .slider-slide.is-hidden-right img {
      filter: brightness(0.72) saturate(0.9);
    }

    body.mobile-performance-lite .slider-stage::before,
    body.mobile-performance-lite .slider-stage::after,
    body.mobile-performance-lite .slider-viewport::before,
    body.mobile-performance-lite .slider-viewport::after,
    body.mobile-performance-lite .reveal-actions::after,
    body.mobile-performance-lite .craft-stage::before,
    body.mobile-performance-lite .craft-stage::after {
      animation: none;
      filter: none;
      opacity: 0.36;
    }

    body.mobile-performance-lite .craft-backdrop {
      display: none;
    }

    body.mobile-performance-lite .craft-slide,
    body.mobile-performance-lite .slider-slide {
      transition:
        transform 240ms ease,
        opacity 180ms ease;
      box-shadow: 0 0.8rem 1.4rem rgba(0, 0, 0, 0.14);
    }

    body.mobile-performance-lite .craft-slide img,
    body.mobile-performance-lite .slider-slide img {
      transition: none;
    }

    body.mobile-performance-lite .slider-slide::before {
      filter: blur(8px);
      opacity: 0.34;
    }

    body.mobile-performance-lite .slider-slide.is-active img {
      animation: none;
    }

    body.mobile-performance-lite .craft-shell[data-active="true"] .craft-slide.is-active img {
      animation: none;
    }

    body.mobile-performance-lite .craft-backdrop-image,
    body.mobile-performance-lite .craft-backdrop-image.is-active {
      filter: none;
    }

    body.mobile-performance-lite .reveal-actions {
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
      background: rgba(255, 255, 255, 0.16);
      box-shadow: 0 0.55rem 1rem rgba(0, 0, 0, 0.1);
    }

    body.mobile-performance-lite .scroll-progress-rail::before {
      box-shadow: none;
    }

    body.mobile-performance-lite .scroll-progress-thumb {
      box-shadow:
        0 0 0 0.06rem rgba(255, 255, 255, 0.18),
        0 0.18rem 0.45rem rgba(0, 0, 0, 0.12);
    }

    @media (prefers-reduced-motion: reduce) {
      .foreground-stage::before,
      .foreground-image,
      .cloud-image img,
      .slider-stage::before,
      .slider-viewport::before,
      .reveal-actions::after,
      .slider-slide.is-active img,
      .slider-dot,
      .craft-stage::before,
      .craft-shell[data-active="true"] .craft-slide.is-active img {
        animation: none;
      }
    }