/* Shared fluid type and space: preserve small screens, grow with usable width and height.
   Pixel media thresholds and fine borders stay fixed; component sizes use rem. */
html { font-size: 100%; --site-unit: calc(1rem / 16); }
@media (min-width: 1600px) and (min-height: 900px) {
  html { font-size: clamp(100%, min(1vw, 1.77777778dvh), 240%); }
}

h1, h2, h3, h4 { font-family: "Barlow Condensed", "Noto Sans SC", sans-serif; font-weight: 400; }
h1 { font-size: 6vw; line-height: 0.9; }
@media screen and (max-width: 1300px) {
h1 { font-size: 3.875rem; }
}
@media screen and (max-width: 600px) {
h1 { font-size: 2.5rem; }
}
h2 { font-size: 12.5vw; letter-spacing: -0.5vw; line-height: 1; }
@media screen and (max-width: 600px) {
h2 { font-size: 20vw; }
}
h3 { font-size: 8vw; letter-spacing: -0.1vw; line-height: 0.95; }
@media screen and (max-width: 600px) {
h3 { font-size: 15vw; }
}
h4 { font-size: 6vw; line-height: 0.85; }
@media screen and (max-width: 600px) {
h4 { font-size: 10vw; }
}
p.lead { font-family: "Barlow Condensed", "Noto Sans SC", serif; font-size: 2.8vw; line-height: 1; margin-bottom: 4vw; }
@media screen and (max-width: 600px) {
p.lead { font-size: 1.875rem; margin-bottom: 1.875rem; }
}
.monospace { font-family: "Geist Mono", "Noto Sans SC", monospace; font-size: 50%; font-weight: 400; letter-spacing: -0.05vw; text-transform: uppercase; }
.layout__third.monospace { padding-left: 3vw; padding-top: 0.8vw; position: relative; white-space: pre-line; }
.layout__third.monospace::before { content: "⬤"; left: 0px; position: absolute; top: 0.8vw; }
@media screen and (max-width: 600px) {
.layout__third.monospace { padding-left: 0px; }
.layout__third.monospace::before { content: ""; }
}
article { padding: 20vw 0px; }
@media screen and (max-width: 600px) {
article { padding: 20vh 0px 10vh; }
}
article { letter-spacing: 0px; }
article a { text-decoration: underline; }
article ol, article p, article ul { font-size: 90%; }
@media screen and (max-width: 600px) {
article ol, article p, article ul { font-size: 100%; }
}
article h5, article h6, article ol, article p, article ul { max-width: 45vw; padding-bottom: 3vw; }
@media screen and (max-width: 600px) {
article h5, article h6, article ol, article p, article ul { max-width: 85vw; padding-bottom: 5vh; }
}
article h2, article h3, article h4 { max-width: 45vw; padding: 3vw 0px; }
@media screen and (max-width: 600px) {
article h2, article h3, article h4 { max-width: 80vw; padding: 5vh 0px; }
}
article h2, article h3 { font-size: 5vw; font-weight: 400; letter-spacing: -0.1vw; line-height: 0.95; }
@media screen and (max-width: 600px) {
article h2, article h3 { font-size: 15vw; }
}
article ol, article ul { padding-left: 0px; }
@media screen and (max-width: 600px) {
article ol, article ul { padding-left: 0px; }
}
article ol li, article ul li { border-bottom: 1px solid rgba(255, 255, 255, 0.4); list-style: none; margin-bottom: 1vw; padding-bottom: 1vw; }
article ol li:last-child, article ul li:last-child { border-bottom-width: medium; border-bottom-style: none; border-bottom-color: currentcolor; }
@media screen and (max-width: 600px) {
article ol li, article ul li { margin-bottom: 2vh; padding-bottom: 2vh; }
}
* { margin: 0px; padding: 0px; }
*, body { box-sizing: border-box; }
body { text-size-adjust: 100%; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: inherit; cursor: pointer; font-weight: inherit; outline: 0px; text-decoration: none; }
address { font-style: normal; }
figure { margin: 0px; padding: 0px; }
img, picture, video { display: block; height: 100%; object-fit: cover; object-position: center top; width: 100%; will-change: transform; }
:root { --bgcolor: #1a1a1a; --primarycolor: #bababa; --red: #ff001a; --grey: #bababa; --black: #111; --lightblue: #9fe4f3; --blue: #03049c; --cream: #bab5a6; --green: #0f0; --pink: #a7849d; --lightgrey: #71737d; --columns: 20; --bannerHeight: 170vh; --radius: .5vw; --border: .0625rem solid hsla(0,0%,100%,.7); --borderFade: .0625rem solid hsla(0,0%,100%,.5); }
@media screen and (max-width: 600px) {
:root { --bannerHeight: 100lvh; --radius: 1vh; }
}
body { background-color: var(--bgcolor); color: var(--primarycolor); font-family: Inter, "Noto Sans SC", sans-serif; font-size: 1.7vw; }
@media screen and (max-width: 1300px) {
body { font-size: 1.25rem; }
}
main { min-height: 100dvh; width: 100vw; }
.topOverlay { background: linear-gradient(180deg,var(--background,var(--bgcolor)) 2%,transparent 100%); height: 20vh; left: 0px; margin-bottom: -20vh; opacity: 1; pointer-events: none; position: fixed; top: 0px; width: 100%; z-index: 2; }
.topOverlay__section { opacity: 0; position: sticky; top: 0px; transition: opacity 0.3s; }
.arrow { display: inline-block; font-family: Inter, "Noto Sans SC", sans-serif; font-size: 150%; line-height: 1; margin-right: 0.5vw; position: relative; top: 0.05vw; }
.buttons { display: flex; flex-wrap: wrap; justify-content: space-between; }
.button { --anim: 0; color: var(--color); font-family: "Geist Mono", "Noto Sans SC", monospace; font-size: 70%; letter-spacing: -0.05vw; position: relative; }
.button__big { border-bottom: 1px solid var(--color); display: flex; justify-content: space-between; padding: 1vw 0px; width: 100%; }
.button__big:first-child { border-top: 1px solid var(--color); }
@media screen and (max-width: 600px) {
.button__big { padding: .625rem 0px; }
}
.button span { position: relative; transition: padding 0.3s; }
.button::before { background-color: var(--color); content: ""; height: calc(100% + .1875rem); left: 0px; position: absolute; top: 0px; transform: scaleY(var(--anim)); transform-origin: 50% var(--button-origin,100%); width: 100%; z-index: 0; }
.button:hover { color: var(--bgcolor); }
.button:hover > span { padding: 0px 1vw; }
html.lenis { height: auto; }
html.lenis.lenis-smooth { scroll-behavior: auto; }
html.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
html.lenis.lenis-stopped { overflow: hidden; }
@media screen and (max-width: 600px) {
html.lenis.lenis-stopped { overflow: auto; }
}
html.lenis.lenis-scrolling iframe { pointer-events: none; }
.line { display: block; overflow: hidden; }
.line__inner { display: block; transform-origin: left top; }
.block { display: block; }
.layout { display: flex; flex-wrap: wrap; justify-content: space-between; padding: 1.5vw 3vw; width: 100vw; }
.layout__third { width: 33%; }
@media screen and (max-width: 600px) {
.layout__third { width: 100%; }
.layout__third.monospace { padding-bottom: 2.5rem; }
}
.layout__second { width: 66%; }
@media screen and (max-width: 600px) {
.layout__second { width: 100%; }
}
@media screen and (max-width: 600px) {
.layout { display: block; padding: .625rem 1.25rem; }
}
.section { padding: 5vw 0px 10vw; position: relative; --color: var(--primarycolor); background-color: var(--background); color: var(--color); }
@media screen and (max-width: 600px) {
.section { padding: 1.875rem 0px 3.75rem; }
}
.section__header { padding: 30vw 0px 10vw; }
@media screen and (max-width: 600px) {
.section__header { padding: 50vh 0px 10vh 1.25rem; }
}
.section__grey { --background: var(--bgcolor); }
.section__lightgrey { --background: var(--lightgrey); --color: var(--black); }
.section__lightgrey .button:hover { color: var(--grey); }
.section__lightgrey .marqueeText::after, .section__lightgrey .marqueeText::before { border-color: var(--black); }
.section__lightgrey .button { border-width: 2px; font-weight: 600; }
.section__black { --background: var(--black); --color: var(--grey); }
.section__blue { --background: var(--blue); --color: var(--grey); }
.no__p { padding: 0px !important; }
.no__pb { padding-bottom: 0px !important; }
.no__pt { padding-top: 0.3vw !important; }
.wrapper { height: 100%; }
.wrapper::after { animation: 0.5s steps(1) 0s infinite normal none running foreground; background-image: url("/img/noise.png"); background-position: 50% center; content: ""; height: calc(100% + 20rem); left: -10rem; mix-blend-mode: overlay; opacity: 0.3; pointer-events: none; position: fixed; top: -10rem; width: calc(100% + 20rem); z-index: 100; }
@media screen and (max-width: 600px) {
.wrapper::after { display: none; }
}
header { position: fixed; top: 0px; z-index: 21; }
header::after { content: ""; height: .0625rem; left: 3vw; position: absolute; right: 3vw; top: 5vw; }
@media screen and (max-width: 600px) {
header::after { border-bottom-width: medium; border-bottom-style: none; border-bottom-color: currentcolor; }
}
header .nav { align-items: flex-start; font-family: "Barlow Condensed", "Noto Sans SC", sans-serif; justify-content: flex-end; }
header .nav a { display: block; padding: 0.3vw 0.7vw; }
header .menu { background: transparent; border: 0px; color: inherit; cursor: pointer; display: block; font: inherit; padding: 1.66vw 3vw; position: fixed; right: 0px; top: 0px; z-index: 4; }
@media screen and (max-width: 600px) {
header .menu { margin-top: 1.875rem; right: 1.25rem; }
}
header .menu { display: none; }
@media screen and (max-width: 600px) {
header .menu { display: block; }
}
header .nav { display: flex; }
@media screen and (max-width: 600px) {
header .nav { display: none; }
}
.mobilenav { left: 0px; pointer-events: none; position: fixed; top: 0px; width: 100vw; }
.mobilenav { background-color: var(--blue); clip-path: rect(0px 100% 0px 0px); color: var(--grey); height: 85svh; padding: 20svh 0px 0px .625rem; z-index: 20; }
.mobilenav__backdrop { background-color: rgba(0, 0, 0, 0.8); height: 100lvh; left: 0px; opacity: 0; pointer-events: none; position: fixed; top: 0px; transition: opacity 0.2s linear; width: 100vw; z-index: 3; }
.mobilenav__main a { display: block; font-family: "Barlow Condensed", "Noto Sans SC", serif; font-size: 2.625rem; line-height: 1; padding: .3125rem .625rem; }
.mobilenav__social { bottom: 5vh; position: absolute; }
body.menu_open { overflow: hidden; }
body.menu_open .mobilenav { pointer-events: all; }
body.menu_open .mobilenav__backdrop { opacity: 1; }
.logo3d { pointer-events: none; position: fixed; z-index: 12; }
.logo3d--hero { bottom: auto; height: 32vh; left: 50vw; top: 55vh; transform: translate(-50%, -50%); width: 70vw; }
@media screen and (max-width: 600px) {
.logo3d--hero { height: 32vh; top: 45vh; width: 70vw; }
}
.logo3d__canvas { height: 100%; width: 100%; }
.home { --primarycolor: #d9d9d9; }
.homeHeroIntro { position: relative; }
.marqueeText { --marquee-line-scale: 0; height: 17vw; left: 0px; overflow: hidden; pointer-events: none; position: fixed; top: 3.5vw; white-space: nowrap; width: 100%; z-index: 3; }
@media screen and (max-width: 600px) {
.marqueeText { height: 6.25rem; top: 5rem; }
}
.marqueeText::after, .marqueeText::before { border-bottom-style: ; border-bottom-color: ; border-width: 2px; content: ""; height: .0625rem; left: 3vw; position: absolute; transform: scaleX(var(--marquee-line-scale)); transform-origin: left top; width: 94vw; }
.marqueeText::before { top: 1.4vw; }
@media screen and (max-width: 600px) {
.marqueeText::before { top: .125rem; }
}
.marqueeText::after { bottom: 4vw; }
.marqueeText__track { display: flex; left: 0px; position: absolute; top: 0px; white-space: nowrap; width: max-content; will-change: transform; }
.marqueeText__title { display: inline-flex; flex: 0 0 auto; line-height: 0.96; margin-bottom: 2vw; white-space: nowrap; }
@media screen and (max-width: 600px) {
.marqueeText__title { margin-bottom: 5vh; }
}
.marqueeText .line { display: inline-block; }
.marqueeText__symbol { font-family: Inter, "Noto Sans SC", sans-serif; padding: 0px 2vw; }
section .marqueeText { position: static; }
section .banner__hero { background: linear-gradient(90deg, rgb(0, 60, 106) 100%, rgb(14, 174, 188) 0px); height: 100vh; object-fit: cover; opacity: 0; overflow: hidden; position: relative; width: 100vw; }
section .banner__hero--wrapper { height: 100%; width: 100%; }
section .banner__hero p { bottom: 3vw; color: rgb(255, 255, 255); position: absolute; right: 0px; width: 32vw; z-index: 3; }
.banner__hero .hero-value-copy { font-size: 2rem; }
@media screen and (max-width: 600px) {
section .banner__hero p { bottom: 3.125rem; width: 80vw; }
}
.banner__hero--wrapper { position: relative; overflow: hidden; }
.home-video-background { position: absolute; inset: 0px; width: 100%; height: 100%; overflow: hidden; opacity: 0; pointer-events: none; }
.hero-background-video { position: absolute; inset: 0px; display: block; width: 100%; height: 100%; margin: 0px; padding: 0px; object-fit: cover; object-position: center center; pointer-events: none; }
section .intro h2 { margin-top: 10vw; padding-top: 5vw; text-align: center; width: 100%; }
@media screen and (max-width: 600px) {
section .intro h2 { margin-top: 30vw; }
}
section.homeworksSection { padding-top: 0px; }
section .homeworks { margin-bottom: 10vw; }
section .homeworks__showcaseHold { overflow: visible; }
@media screen and (max-width: 600px) {
section .homeworks__showcaseHold { margin-top: 1.25rem; }
}
section .homeworks__showcase { cursor: pointer; height: 40vw; margin-top: 5vw; max-height: 72vh; min-height: 20rem; overflow: hidden; position: relative; touch-action: pan-y; user-select: none; width: 100vw; }
@media screen and (max-width: 600px) {
section .homeworks__showcase { height: 72vw; max-height: none; min-height: 16.25rem; }
}
section .homeworks__showcase::after, section .homeworks__showcase::before { content: ""; height: 100%; opacity: 0.3; pointer-events: none; position: absolute; top: 0px; width: 6vw; z-index: 2; }
section .homeworks__showcase::before { background: linear-gradient(90deg,var(--background,var(--bgcolor)) 0,transparent 100%); left: 0px; }
section .homeworks__showcase::after { background: linear-gradient(270deg,var(--background,var(--bgcolor)) 0,transparent 100%); right: 0px; }
section .homeworks__showcaseItem { border-radius: .75rem; flex: 0 0 auto; height: 100%; margin: 0px; overflow: hidden; pointer-events: none; }
section .homeworks__showcaseItem img { display: block; height: 100%; max-width: none; object-fit: contain; pointer-events: none; user-select: none; width: auto; -webkit-user-drag: none; }
@media screen and (max-width: 600px) {
section .homeworks__showcaseItem { border-radius: .5rem; }
}
.section .pricing__box { margin-bottom: 2vw; padding-bottom: 2vw; position: relative; }
@media screen and (max-width: 600px) {
.section .pricing__box { --corner-size: 1.75rem; margin-bottom: 2.5rem; margin-top: 1.25rem; padding: 2.5rem 0px; }
}
.footer { min-height: calc(100vh - 5.1vw); overflow: hidden; position: relative; width: 100vw; }
.footer__wrapper { height: 100%; position: relative; }
.logo-img { height: auto; max-height: 3.4375rem; width: auto; display: block; }
body.home .logo3d--hero { top: 50vh; }

/* Static first screen stays readable before optional WebGL enhancement. */
section .banner__hero,.home-video-background{opacity:1}
.logo3d__canvas canvas{display:block;width:100%;height:100%}
[hidden]{display:none!important}
.mobilenav{transition:clip-path .5s cubic-bezier(.16,1,.3,1)}
body.menu_open .mobilenav{clip-path:inset(0)}
@media(prefers-reduced-motion:reduce){.mobilenav{transition:none}}

@keyframes foreground { 
  0% { transform: translate3d(0px, 9rem, 0px); }
  10% { transform: translate3d(-1rem, -4rem, 0px); }
  20% { transform: translate3d(-8rem, 2rem, 0px); }
  30% { transform: translate3d(9rem, -9rem, 0px); }
  40% { transform: translate3d(-2rem, 7rem, 0px); }
  50% { transform: translate3d(-9rem, -4rem, 0px); }
  60% { transform: translate3d(2rem, 6rem, 0px); }
  70% { transform: translate3d(7rem, -8rem, 0px); }
  80% { transform: translate3d(-9rem, 1rem, 0px); }
  90% { transform: translate3d(6rem, -5rem, 0px); }
  100% { transform: translate3d(-7rem, 0px, 0px); }
}