.sc-placeholder { display: none !important; }

@font-face { font-family: JuniperBay; src: url("/assets/fonts/JuniperBay-Regular.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: block; }

@font-face{font-family:"Poppins";src:url("/assets/fonts/Poppins-Light-latin.woff2") format("woff2");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"Poppins";src:url("/assets/fonts/Poppins-Regular-latin.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Poppins";src:url("/assets/fonts/Poppins-Medium-latin.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Poppins";src:url("/assets/fonts/Poppins-SemiBold-latin.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Poppins";src:url("/assets/fonts/Poppins-Bold-latin.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}

@font-face{font-family:"Poppins Fallback";src:local("Arial");size-adjust:112.16%;ascent-override:93.62%;descent-override:31.21%;line-gap-override:8.92%}

@font-face { font-family: Nohemi; src: url("https://www.vuyanziglorious.com/uploads/Nohemi-Light.woff2") format("woff2"), url("https://www.vuyanziglorious.com/uploads/Nohemi-Light.woff") format("woff"); font-weight: 300; font-style: normal; font-display: swap; }

@font-face { font-family: Nohemi; src: url("/assets/fonts/Nohemi-Regular.woff2") format("woff2"), url("https://www.vuyanziglorious.com/uploads/Nohemi-Regular.woff") format("woff"); font-weight: 400; font-style: normal; font-display: swap; }

@font-face { font-family: Nohemi; src: url("/assets/fonts/Nohemi-Medium.woff2") format("woff2"), url("https://www.vuyanziglorious.com/uploads/Nohemi-Medium.woff") format("woff"); font-weight: 500; font-style: normal; font-display: swap; }

@font-face { font-family: Nohemi; src: url("https://www.vuyanziglorious.com/uploads/Nohemi-SemiBold.woff2") format("woff2"), url("https://www.vuyanziglorious.com/uploads/Nohemi-SemiBold.woff") format("woff"); font-weight: 600; font-style: normal; font-display: swap; }

@font-face { font-family: Nohemi; src: url("/assets/fonts/Nohemi-Bold.woff2") format("woff2"), url("https://www.vuyanziglorious.com/uploads/Nohemi-Bold.woff") format("woff"); font-weight: 700; font-style: normal; font-display: swap; }

@font-face { font-family: "NaN SuperX"; src: url("/assets/fonts/NaNSuperXSansDisplay-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: block; }

@font-face { font-family: "NaN SuperX"; src: url("/assets/fonts/NaNSuperXSansDisplay-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: block; }

@font-face { font-family: "NaN SuperX"; src: url("https://www.vuyanziglorious.com/uploads/NaNSuperXSansDisplay-Semibold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: block; }

@font-face { font-family: "Nohemi Fallback"; src: local("Arial"); size-adjust: 107.6%; ascent-override: 74%; descent-override: 19%; line-gap-override: 0%; }

@font-face { font-family: "NaN SuperX Fallback"; src: local("Arial"); size-adjust: 99.3%; ascent-override: 88%; descent-override: 16%; line-gap-override: 0%; }

:root { --space-1: 4px; --space-1-5: 6px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-24: 96px; --grid-gutter: var(--space-6); --radius-md: 0.5rem; --radius-xl: 0.75rem; --page-bg: #FFFFFF; }

:root { --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1); --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1); --ease-in-out-flow: cubic-bezier(0.76, 0, 0.24, 1); --ease-fluid-snap: cubic-bezier(0.3, 1.36, 0.4, 1); --ease-sine: cubic-bezier(0.45, 0.05, 0.55, 0.95); --ease-fold: cubic-bezier(0.65, 0, 0.35, 1); --ease-bounce-soft: cubic-bezier(0.34, 1.3, 0.5, 1); --ease-book-open: cubic-bezier(0.28, 0.62, 0.16, 1); --ease-book-close: cubic-bezier(0.4, 0.02, 0.2, 1); --ease-fly: cubic-bezier(0.5, 0, 0.12, 1); --ease-depart: cubic-bezier(0.55, 0, 0.75, 0.45); --ease-brush-draw: cubic-bezier(0.2, 0.7, 0.3, 1); --ease-brush-retract: cubic-bezier(0.4, 0, 0.6, 1); --dur-text-heading: 900ms; --dur-text-body: 700ms; --dur-dot: 420ms; --dur-curtain-in: 750ms; --dur-curtain-hold: 100ms; --dur-curtain-out: 950ms; --stagger-line: 80ms; }

@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; }
}

html, body { margin: 0px; height: 100%; overflow: hidden; background: var(--page-bg,#FFFFFF); font-size: 16px; }

a { color: rgb(36, 36, 36); }

a:where(:not(.cta, .btn-sec, .corner-cta, .chip, .subchip, .fchip, .cbtn)):hover { color: rgb(58, 58, 58); }

.stage { --paper: var(--page-bg,#FFFFFF); --brush-color: #F1BE48; --frame-x: clamp(16px,1.4vw,20px); --frame-top: clamp(16px,2vh,20px); --frame-bottom: clamp(16px,2vh,20px); --stack-heading-body: var(--space-4); --stack-body-cta: var(--space-6); --para-measure: min(400px,100%); --hblk: clamp(600px,42vw,640px); --cnote-left: 32vw; --nav-left: clamp(24px,3vw,40px); --nav-w: 210px; --content-left: calc(var(--nav-left) + var(--nav-w) + var(--space-8)); --reveal: 1s; --gease: var(--ease-fold); --ease: var(--ease-sine); --type-display-xl: 700 clamp(72px,14vw,220px)/.85 'Poppins','Poppins Fallback',Helvetica,Arial,sans-serif; --type-heading-m: 700 36px/44px 'Poppins','Poppins Fallback',Helvetica,Arial,sans-serif; --type-heading-s: 500 30px/38px 'Poppins','Poppins Fallback',Helvetica,Arial,sans-serif; --type-lead: 500 24px/32px 'NaN SuperX','NaN SuperX Fallback',Helvetica,Arial,sans-serif; --type-body: 400 18px/28px 'NaN SuperX','NaN SuperX Fallback',Helvetica,Arial,sans-serif; --type-ui: 600 16px/24px 'NaN SuperX','NaN SuperX Fallback',Helvetica,Arial,sans-serif; --type-caption: 700 14px/20px 'Nohemi','Nohemi Fallback',Helvetica,Arial,sans-serif; --hand-size: 29px; --type-hand: 600 clamp(25px,2.7vw,29px) 'NaN SuperX','NaN SuperX Fallback',Helvetica,Arial,sans-serif; position: fixed; inset: 0px; perspective: 1200px; font-family: "NaN SuperX", "NaN SuperX Fallback", Helvetica, Arial, sans-serif; font-size: 16px; color: rgb(36, 36, 36); background: var(--paper); }

.sc { position: fixed; inset: 0px; height: 100svh; overflow: hidden; background: var(--paper); opacity: 0; z-index: 1; }

.sc.cur { opacity: 1; z-index: 2; }

.sc.mov { background: transparent; }

.sc.mov .mbox { mask-image: var(--edgemask); mask-size: 100% 100%; mask-repeat: no-repeat; }

.tz { position: absolute; inset: 0px; z-index: 4; pointer-events: none; display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--grid-gutter); padding: var(--frame-top) var(--frame-x) var(--frame-bottom) var(--frame-x); box-sizing: border-box; }

.mbox { position: absolute; inset: 0px; overflow: hidden; }

.mbox::after { content: ""; position: absolute; inset: -2px; pointer-events: none; z-index: 2; box-shadow: inset 0 0 clamp(36px,5vw,84px) clamp(14px,2.2vw,34px) var(--paper,#FFFFFF); }

.aov { position: absolute; inset: 0px; z-index: 3; pointer-events: none; }

.vid { position: absolute; inset: 0px; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .35s var(--ease); }

.vid.on { opacity: 1; }

.fxc { position: absolute; inset: 0px; width: 100%; height: 100%; pointer-events: none; }

.fxc.off { display: none; }

.reduced .vid { opacity: 1; }

.veil { position: absolute; inset: 0px; background: radial-gradient(58% 72% at 24% 50%, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 72%); pointer-events: none; opacity: 0; transition: opacity 1.6s var(--ease); }

.veil.on { opacity: 1; }

.fin { opacity: 0; transform: translateY(14px); transition: opacity .6s var(--ease),transform .6s var(--ease); }

.fin.in { opacity: 1; transform: translateY(0px); }

.reduced .fin { transform: none; transition: opacity .6s var(--ease); }

.d3 { transition-delay: 0.55s; }

@media (min-width: 800px) {
  .st1 { grid-column: 1 / 13; place-self: start end; }
}

.ctaw { margin-top: var(--space-10); align-self: flex-start; margin-left: var(--cta-x,140px); pointer-events: none; }

.hero { position: relative; width: var(--hblk); max-width: 100%; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; text-align: left; }

@media (min-width: 800px) {
  .hero.st1 { margin-top: 70px; }
}

.headline { margin: 0px; width: 100%; font-family: "Poppins", "Poppins Fallback", Helvetica, Arial, sans-serif; font-weight: 300; font-size: 72px; line-height: 1.1; color: rgb(36, 36, 36); letter-spacing: -0.02em; }

.hl-line { display: block; white-space: nowrap; }

.hl-w { display: inline-block; }

.hl-l2 { margin-left: 16%; }

.hl-l3 { margin-left: 34%; }

.hlemph { font-weight: 600; }

.headline .hlr { display: block; opacity: 0; }

.headline .hl-line { clip-path: inset(-0.35em -9999px 0px); }

.hero.in .hl-line { animation: trClipOpen calc(var(--dur-text-heading,900ms)/.9) linear both; }

.hero.in .hlr { animation: trLine var(--dur-text-heading,900ms) var(--ease-out-expo,cubic-bezier(.16,1,.3,1)) both; }

.hero.in .hl-line:nth-of-type(2), .hero.in .hl-line:nth-of-type(2) .hlr { animation-delay: var(--stagger-line,80ms); }

.hero.in .hl-line:nth-of-type(3), .hero.in .hl-line:nth-of-type(3) .hlr { animation-delay: calc(2*var(--stagger-line,80ms)); }

.hero.in .hl-line:nth-of-type(4), .hero.in .hl-line:nth-of-type(4) .hlr { animation-delay: calc(3*var(--stagger-line,80ms)); }

.reduced .headline .hlr { animation: auto ease 0s 1 normal none running none; opacity: 1; }

.reduced .headline .hl-line { animation: auto ease 0s 1 normal none running none; clip-path: none; }

.annot { position: absolute; left: var(--annot-x,330px); top: var(--annot-y,10px); max-width: 150px; margin: 0px; font: 400 14px / 18px Nohemi, "Nohemi Fallback", Helvetica, Arial, sans-serif; color: rgb(36, 36, 36); text-align: left; }

.cnote { position: absolute; left: calc(var(--frame-x) + 19px); top: calc(var(--frame-top) + 110px); margin: 0px; font: 400 18px / 26px Nohemi, "Nohemi Fallback", Helvetica, Arial, sans-serif; color: rgb(36, 36, 36); text-align: left; z-index: 4; pointer-events: none; white-space: nowrap; }

.hl { opacity: 0; }

.hl.ctr { transform: translateX(-50%); text-align: center; max-width: 560px; }

.anns.show .hl { opacity: 1; transition: opacity 1.2s var(--ease); }

.slbl { position: absolute; margin: 0px; color: rgb(36, 36, 36); opacity: 0; pointer-events: none; display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; width: 100%; }

.sname { font: 400 var(--hand-size)/34px 'JuniperBay',cursive; color: rgb(36, 36, 36); transform-origin: 0% 100%; }

.speriod { font: 400 16px / 34px "NaN SuperX", "NaN SuperX Fallback", Helvetica, Arial, sans-serif; color: rgb(36, 36, 36); white-space: nowrap; transform: translateY(-6px); }

.lblmask { width: 100%; align-self: stretch; clip-path: inset(-0.5em -9999px -0.1em); }

.anns.show .lblmask { animation: trClipOpen calc((.45s + var(--dur-text-heading,900ms))/.9) linear both; }

.anns.show .slbl { animation: trLine var(--dur-text-heading,900ms) var(--ease-out-expo,cubic-bezier(.16,1,.3,1)) .45s both; }

.reduced .anns.show .lblmask { animation: auto ease 0s 1 normal none running none; clip-path: none; }

.reduced .anns.show .slbl { animation: auto ease 0s 1 normal none running none; opacity: 1; }

.asvg { position: absolute; inset: 0px; width: 100%; height: 100%; pointer-events: none; overflow: visible; transform-origin: center center; }

.asvg.wig { animation: wig .5s var(--ease); }

@keyframes wig { 
  25% { transform: rotate(1deg); }
  75% { transform: rotate(-0.8deg); }
}

.afill { fill: rgb(36, 36, 36); opacity: 0.9; }

.amask { fill: none; stroke: rgb(255, 255, 255); stroke-width: 16px; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; }

.anns.show .amask { stroke-dashoffset: 0; transition: stroke-dashoffset .6s var(--ease) 1.2s; }

.ahead { fill: none; stroke: rgb(36, 36, 36); stroke-width: 2px; stroke-linecap: round; stroke-linejoin: round; opacity: 0; }

.anns.show .ahead { opacity: 0.9; transition: opacity .28s var(--ease) 1.72s; animation: apop .36s var(--ease) 1.72s both; }

@keyframes apop { 
  0% { transform: translate(0px, 0px); }
  62% { transform: translate(var(--tx,0),var(--ty,0)); }
  100% { transform: translate(0px, 0px); }
}

.bcta:hover, .bcta:focus-visible { text-decoration-color: transparent; }

.wcta { display: inline-block; text-decoration: none; text-align: center; white-space: nowrap; margin-top: var(--stack-body-cta); opacity: 0; }

.anns.show .wcta { opacity: 1; animation: wctarise var(--dur-text-body,700ms) var(--ease-out-expo,cubic-bezier(.16,1,.3,1)) .75s backwards; transition: background .5s var(--ease),transform .5s var(--ease); }

@keyframes wctarise { 
  0% { opacity: 0; transform: translateY(14px); }
}

.reduced .anns.show .wcta { animation: auto ease 0s 1 normal none running none; }

.cblk { position: absolute; left: 0px; top: 0px; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; max-width: min(var(--para-measure),42vw); pointer-events: none; }

.cblk .slbl { position: static; left: auto; top: auto; }

.cpar { margin: var(--stack-heading-body) 0 0; font: var(--type-body); color: rgb(36, 36, 36); max-width: var(--para-measure); text-wrap: pretty; opacity: 0; text-shadow: rgba(255, 255, 255, 0.85) 0px 0px 10px, rgba(255, 255, 255, 0.6) 0px 0px 4px; }

.reduced .anns.show .cpar { opacity: 1; }

.statblk { position: absolute; left: 0px; top: 0px; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; pointer-events: none; opacity: 0; }

.anns.show .statblk { opacity: 1; transition: opacity 1s var(--ease) 1.15s; }

.reduced .anns .statblk { transition: none; }

.t { position: relative; z-index: 1; }

.bstroke { position: absolute; left: -4px; right: -4px; bottom: -1px; height: 12px; z-index: 0; color: var(--brush-color,#242424); clip-path: inset(0px 100% 0px 0px); transition: clip-path .2s var(--ease-brush-retract,cubic-bezier(.4,0,.6,1)); }

.bcta:hover .bstroke, .bcta:focus-visible .bstroke { clip-path: inset(0px); transition: clip-path .35s var(--ease-brush-draw,cubic-bezier(.2,.7,.3,1)); }

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

.bstroke path { fill: currentcolor; }

.bfill { position: absolute; left: -4px; right: -4px; bottom: -2px; height: 6px; z-index: -1; color: rgb(241, 190, 72); clip-path: inset(0px 100% 0px 0px); transition: clip-path .2s var(--ease-brush-retract,cubic-bezier(.4,0,.6,1)); }

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

.bfill path { fill: currentcolor; }

.hot { position: absolute; pointer-events: auto; background: radial-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 70%); border-width: medium; border-style: none; border-color: currentcolor; border-image: none; padding: 0px; border-radius: 16px; transition: background 1s var(--ease); }

.hot:hover { background: radial-gradient(rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0) 75%); }

.reduced .anns .hl, .reduced .anns .slbl, .reduced .anns .wcta { transition: none; }

.reduced .anns .amask, .reduced .anns .ahead { transition: none; animation: auto ease 0s 1 normal none running none; transform: none; }

.cta { background: rgb(36, 36, 36); color: rgb(255, 255, 255); border-width: medium; border-style: none; border-color: currentcolor; border-image: none; border-radius: var(--radius-md); font: 500 14px / 20px Nohemi, "Nohemi Fallback", Helvetica, Arial, sans-serif; letter-spacing: 0.02em; padding: 16px 22px; pointer-events: auto; position: relative; overflow: hidden; transition: background .5s var(--ease),transform .5s var(--ease); }

.cta:focus-visible { outline: none; }

.cta::after { content: ""; position: absolute; inset: 0px; z-index: 3; pointer-events: none; border-radius: var(--radius-md); box-shadow: rgb(241, 190, 72) 0px 0px 0px 2px inset; opacity: 0; }

.cta:focus-visible::after { opacity: 1; }

.hint { position: absolute; left: 50%; bottom: var(--frame-bottom); transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: var(--space-3); font: 600 12px / 16px Nohemi, "Nohemi Fallback", Helvetica, Arial, sans-serif; letter-spacing: 0.02em; z-index: 2; transition: opacity 1.2s var(--ease); }

.hint.off { opacity: 0; }

.track { width: 1px; height: 42px; background: rgba(36, 36, 36, 0.18); position: relative; overflow: hidden; }

.dash { position: absolute; left: 0px; top: -14px; width: 1px; height: 14px; background: rgb(36, 36, 36); animation: drip 2s var(--ease) infinite; }

@keyframes drip { 
  0% { transform: translateY(0px); }
  100% { transform: translateY(56px); }
}

@media (max-height: 840px) and (min-width: 1280px) {
  .cta { padding: 13px 18px; }
}

@media (max-width: 799px) {
  .sc { display: flex; flex-direction: column; }
  .tz { display: block; position: relative; inset: auto; z-index: 4; background: var(--paper); padding: var(--frame-top) var(--frame-x) var(--frame-bottom) 64px; box-sizing: border-box; pointer-events: auto; }
  .mbox { position: relative; inset: auto; flex: 1 1 0%; }
  .hero { width: auto; max-width: none; align-items: flex-start; margin-top: 88px; }
  .headline { font-size: clamp(40px, 9vw, 56px); line-height: 1.1; }
  .annbr { display: none; }
  .hl-line { white-space: normal; }
  .hl-l2, .hl-l3 { margin-left: 0px; }
  .annot { position: static; left: auto; top: auto; max-width: 34ch; margin: var(--space-5) 0 0; }
  .cnote { position: static; right: auto; bottom: auto; max-width: 34ch; margin: var(--space-6) 0 0; font-size: 16px; line-height: 24px; white-space: normal; }
  .ctaw { margin-top: var(--space-6); align-self: flex-start; margin-left: 0px; }
  .slbl { position: static; }
  .hl { max-width: 20ch; }
  .hl.ctr { transform: none; text-align: left; max-width: 20ch; }
  .tz .slbl { display: flex; margin-top: var(--space-3); pointer-events: auto; }
  .cblk { position: static; max-width: none; }
  .cpar { max-width: var(--para-measure); }
  .stage { --stack-heading-body: var(--space-3); --stack-body-cta: var(--space-4); }
  .statblk { position: static; left: auto; top: auto; max-width: none; width: 100%; margin-top: var(--space-4); }
  .veil { display: none; }
  .mhide { display: none; }
  .cta { padding: 13px 18px; }
  .dot { width: 44px; height: 44px; }
}

@media (max-width: 799px) {
  .tz { padding: calc(var(--frame-top) + 96px) var(--frame-x) var(--frame-bottom) var(--frame-x); }
  .statblk { display: none; }
  .hero { max-width: none; margin-top: 0px; }
  .annot { max-width: 34ch; margin: var(--space-5) 0 0; }
  .tz:not(.anns) { display: flex; flex-direction: column; gap: var(--space-6); }
  .tz:not(.anns) .hero { display: contents; }
  .tz:not(.anns) .headline { position: relative; order: 0; }
  .tz:not(.anns) .annot { position: absolute; left: var(--mannot-l,auto); right: var(--mannot-r,var(--frame-x)); top: var(--mannot-t,calc(var(--frame-top) + 96px)); width: var(--mannot-w,min(44vw,200px)); max-width: none; margin: 0px; text-align: left; }
  .tz:not(.anns) .annot .annbr { display: inline; }
  .tz:not(.anns) .cnote { order: 1; position: static; inset: auto; margin: 0px; align-self: flex-end; max-width: 34ch; text-align: right; font-size: 16px; line-height: 24px; white-space: normal; }
  .tz:not(.anns) .ctaw { order: 2; margin: 0px; align-self: flex-start; }
}

@media (max-width: 399px) {
  .ct-cols { flex-direction: column; gap: var(--space-4); }
}