/* Navigation, logo visibility, and device-specific refinements. */
html { scroll-padding-top: 92px; }
body { overflow-x: hidden; }

/* Entry loader: static media is ready before the page is revealed. */
html.is-loading,
html.is-loading body { overflow: hidden; }
#page-loader { position: fixed; z-index: 10000; inset: 0; display: grid; place-items: center; background: #050505; opacity: 1; visibility: visible; transition: opacity .62s cubic-bezier(.2,.7,.2,1), visibility .62s; }
html:not(.is-loading) #page-loader { opacity: 0; visibility: hidden; pointer-events: none; }
.loader-stage { position: relative; display: grid; place-items: center; width: min(32vw, 196px); aspect-ratio: 1; }
.loader-stage::before { content: ""; position: absolute; inset: 9%; border-radius: 50%; background: radial-gradient(circle, rgba(230,177,62,.16), rgba(181,113,14,.035) 49%, transparent 70%); filter: blur(9px); animation: loader-glow 1.9s ease-in-out infinite; }
.loader-stage img { position: relative; z-index: 1; width: 66%; height: 66%; object-fit: contain; filter: drop-shadow(0 8px 18px rgba(212,151,38,.36)); animation: loader-mark 1.72s cubic-bezier(.48,0,.28,1) infinite; }
.loader-orbit { position: absolute; inset: 0; border: 1px solid rgba(243,198,90,.18); border-top-color: rgba(255,226,147,.92); border-radius: 50%; animation: loader-orbit 1.55s linear infinite; }
.loader-orbit::after { content: ""; position: absolute; top: -3px; left: 50%; width: 5px; height: 5px; border-radius: 50%; background: #ffe29a; box-shadow: 0 0 13px 4px rgba(243,186,62,.45); }
.loader-copy { position: absolute; z-index: 2; bottom: -28px; color: rgba(246,238,215,.66); font-size: 10px; letter-spacing: .34em; transform: translateX(.17em); }
.loader-progress { position: absolute; z-index: 2; bottom: -52px; color: rgba(255,224,145,.94); font: 500 13px/1 Arial, sans-serif; letter-spacing: .06em; }
.loader-progress b { font-weight: 500; }.loader-progress i { margin-left: 1px; font-style: normal; font-size: .72em; }
@keyframes loader-mark { 0%, 100% { transform: rotate(-4deg) scale(.86); opacity: .64; } 48% { transform: rotate(7deg) scale(1.04); opacity: 1; } }
@keyframes loader-orbit { to { transform: rotate(360deg); } }
@keyframes loader-glow { 0%, 100% { transform: scale(.78); opacity: .35; } 50% { transform: scale(1.16); opacity: 1; } }

#site-header {
  position: fixed;
  height: 92px;
  transition: background .28s ease, backdrop-filter .28s ease, border-color .28s ease;
}
#site-header.scrolled {
  background: rgba(5, 5, 5, .82);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(255, 255, 255, .12);
}
.brand img {
  object-position: center;
  filter: invert(1) grayscale(1) brightness(1.8);
}
.brand { gap: 8px; }
nav a { position: relative; padding: 10px 0; border-bottom: 0 !important; transition: color .2s ease; }
nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 1px; background: #fff; transform: scaleX(0); transform-origin: left; transition: transform .22s ease; }
nav a.active, nav a:hover { color: #fff; }
nav a.active::after, nav a:hover::after { transform: scaleX(1); }

/* The oversized decorative C previously crossed the closing copy and footer. */
.closing::after { content: none; }
.numbers sup { margin-left: 5px; font: 400 .32em/1 Arial, sans-serif; vertical-align: super; letter-spacing: 0; }
.product-preview { display:none; overflow:hidden; margin:0 24px 25px 0; aspect-ratio:16/9; background:#d2d0ca; }.product-preview.has-image { display:block; }.product-preview img { display:block; width:100%; height:100%; object-fit:cover; filter:grayscale(1); transition:transform .5s ease, filter .5s ease; }@media(hover:hover) and (pointer:fine){.product article:hover .product-preview img{transform:scale(1.04);filter:grayscale(0)}}
.product > #product-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr)); border-top:1px solid #222; }
.product > #product-grid article, .product > #product-grid article + article { min-height:260px; padding:28px 26px 48px; border:0; border-right:1px solid #777; border-bottom:1px solid #777; }
.product > #product-grid article:last-child { border-right:0; }
.product-link { display:inline-block; }
.product-link[aria-disabled="true"] { cursor:default; }

@keyframes sculpture-drift {
  0%, 100% { transform: scale(1.015) translate3d(0, 0, 0); }
  50% { transform: scale(1.04) translate3d(-.7%, -1.2%, 0); }
}
@keyframes copy-rise {
  from { opacity: 0; transform: translateY(22px); }
  to { opacity: 1; transform: translateY(0); }
}
.hero > img { animation: sculpture-drift 13s ease-in-out infinite; will-change: transform; }
#particle-field { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; pointer-events: none; opacity: .98; mix-blend-mode: screen; filter: contrast(1.16); }
.hero .copy, .hero aside, .hero .more { z-index: 2; }
.hero .copy > * { opacity: 0; animation: copy-rise .9s cubic-bezier(.2,.7,.2,1) forwards; }
.hero .copy > p { animation-delay: .12s; }
.hero .copy > h1 { animation-delay: .24s; }
.hero .copy > span { animation-delay: .38s; }
.hero .copy > a { animation-delay: .52s; }
.reveal { opacity: 0; transform: translateY(34px); transition: opacity .85s cubic-bezier(.2,.7,.2,1), transform .85s cubic-bezier(.2,.7,.2,1); }
.reveal.is-visible { opacity: 1; transform: translateY(0); }
.product article { transition: transform .35s ease; }
@media (hover: hover) and (pointer: fine) { .product article:hover { transform: translateY(-8px); } }

@keyframes signal-breathe { 0%, 100% { opacity: .16; transform: scaleX(.82); } 50% { opacity: .68; transform: scaleX(1); } }
@keyframes hairline-pass { 0%, 22% { transform: translateX(-110%); opacity: 0; } 35%, 68% { opacity: .65; } 100% { transform: translateX(110%); opacity: 0; } }
.manifesto { isolation: isolate; }
.manifesto::before { content: ""; position: absolute; z-index: 0; top: 16%; right: 7vw; width: min(28vw, 360px); height: 1px; background: linear-gradient(90deg, transparent, #e8e9ea, transparent); animation: signal-breathe 4.8s ease-in-out infinite; transform-origin: right; }
.product article { position: relative; overflow: hidden; }
.product article::after { content: ""; position: absolute; top: 0; left: 0; width: 45%; height: 1px; background: #111; opacity: 0; animation: hairline-pass 6s ease-in-out infinite; }
.product article:nth-child(2)::after { animation-delay: .8s; }.product article:nth-child(3)::after { animation-delay: 1.6s; }
.numbers article { position: relative; overflow: hidden; }
.numbers article::after { content: ""; position: absolute; top: 0; left: 0; height: 1px; width: 100%; background: linear-gradient(90deg, transparent, #fff, transparent); opacity: .32; animation: hairline-pass 7s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .hero > img { transform: none; }
  #particle-field { display: none; }
  .loader-stage::before, .loader-stage img, .loader-orbit { animation: none; }
  .reveal, .reveal.is-visible { opacity: 1; transform: none; }
}

@media (min-width: 801px) and (max-width: 1100px) {
  #site-header { height: 80px; padding: 0 4vw; }
  html { scroll-padding-top: 80px; }
  nav { gap: clamp(18px, 3vw, 32px); margin-left: 28px; }
  .brand b { font-size: 11px; }
  .brand small { letter-spacing: .22em; }
  .intro { min-height: 630px; }
  .intro h2 { margin-top: 84px; }
  .proof { min-height: 680px; }
  .numbers { width: 40%; }
}

@media (max-width: 800px) {
  html { scroll-padding-top: 68px; }
  #site-header { height: 68px; z-index: 1001; padding: 0 20px; }
  #site-header nav {
    position: fixed;
    top: 68px;
    right: 0;
    bottom: auto;
    left: 0;
    z-index: 1000;
    height: calc(100dvh - 68px);
    min-height: calc(100svh - 68px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 12px;
    margin: 0;
    padding: max(8vh, env(safe-area-inset-top)) 10vw max(12vh, env(safe-area-inset-bottom));
    background: #050505;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-12px);
    transition: opacity .22s ease, transform .22s ease, visibility .22s;
  }
  #site-header nav a { font: 500 clamp(30px, 9vw, 48px)/1.2 "Noto Serif SC", "Songti SC", serif; letter-spacing: -.07em; color: #8f8f8f; }
  #site-header nav a::after { bottom: -2px; }
  body.menu-open { overflow: hidden; overscroll-behavior: none; }
  body.menu-open #site-header { background: #050505; }
  body.menu-open #site-header nav { opacity: 1; visibility: visible; transform: translateY(0); }
  body.menu-open main, body.menu-open footer { pointer-events: none; }
  .menu { position: relative; z-index: 1002; padding: 0; }
  body.menu-open .menu i:first-child { transform: translateY(4px) rotate(45deg); }
  body.menu-open .menu i:last-child { transform: translateY(-4px) rotate(-45deg); }
  .menu i { transition: transform .2s ease; }
  .closing { min-height: 500px; }
  .product-preview { margin:0 0 18px; }
  .product > #product-grid { grid-template-columns:1fr; }
  .product > #product-grid article, .product > #product-grid article + article { min-height:auto; padding:23px 0; border-right:0; }
}

@media (max-width: 480px) {
  #site-header { padding-inline: 16px; }
  .brand { gap: 7px; }
  .brand b { font-size: 9px; letter-spacing: .06em; }
  .brand small { font-size: 5px; letter-spacing: .19em; }
  .brand img { width: 30px; height: 30px; }
  .copy { top: 23vh; }
  .copy a { width: min(245px, 80vw); }
  .hero h1 { font-size: clamp(52px, 16vw, 65px); }
  .intro h2, .proof h2, .closing h2 { font-size: clamp(46px, 14vw, 58px); }
  .manifesto > p { font-size: clamp(39px, 12vw, 48px); }
  footer { padding-inline: 10vw; }
}