@import url("https://fonts.googleapis.com/css2?family=Instrument+Sans:ital,wght@0,400..800;1,400..800&display=swap"); :root { --base-100: rgb(242, 237, 230); --base-200: rgb(204, 200, 194); --base-250: rgb(179, 167, 152); --base-300: rgb(153, 143, 130); --base-350: rgb(128, 119, 108); --base-400: rgb(102, 95, 86); --base-450: rgb(31, 29, 29); --base-500: rgb(20, 19, 19); } * { margin: 0; padding: 0; box-sizing: border-box; user-select: none; } /* Hide scrollbars while keeping scroll functionality */ html { scrollbar-width: none; /* Firefox */ -ms-overflow-style: none; /* IE/Edge */ } html::-webkit-scrollbar { display: none; /* Chrome, Safari, Opera */ } body { font-family: "Instrument Sans", sans-serif; background-color: #0d0c0c; overflow-x: hidden; /* Prevent horizontal scroll */ -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; } /* Native mobile scroll tuning — activated only when lenis-setup detects a touch/mobile device and adds .native-scroll to . Keeps the design untouched; only improves scroll fluidity. */ html.native-scroll, html.native-scroll body { -webkit-overflow-scrolling: touch; /* iOS momentum scrolling */ overscroll-behavior-y: none; /* Kill rubber-band/bounce lag on Chrome/Android */ touch-action: pan-y; /* Tell the browser we only do vertical panning — faster hit test */ } html.native-scroll body { scroll-behavior: auto; /* Let native momentum own the scroll; smooth behavior adds jank on touch */ } /* Promote known scroll-animated sections to their own compositor layer so repaints during scroll stay on the GPU. No visual change. NOTE: .featured-projects is intentionally excluded — its child cards use perspective + transform-style: preserve-3d + position: sticky for the 3D stacking animation, and a `transform` on the parent breaks both the perspective and the sticky containing block. */ @media (max-width: 1000px) { .hero, .spotlight, .what-we-do, .location-section, .footer { transform: translateZ(0); -webkit-transform: translateZ(0); backface-visibility: hidden; -webkit-backface-visibility: hidden; } /* Background images are the heaviest repaint source during scroll. Hinting them lets iOS/Android keep them cached on the GPU. */ .hero .hero-bg, .hero .hero-bg img, .hero .hero-bg video { will-change: transform; transform: translateZ(0); } } section, .footer { background-color: var(--base-500); } img { width: 100%; height: 100%; object-fit: cover; user-select: none; } h1 { font-size: 5rem; font-weight: 400; letter-spacing: -0.25rem; line-height: 1.05; } h2 { font-size: 3.5rem; font-weight: 500; letter-spacing: -0.15rem; line-height: 1.2; } h3 { font-size: 2.5rem; font-weight: 400; letter-spacing: -0.075rem; line-height: 1.2; } p { font-size: 1rem; font-weight: 400; line-height: 1.4; } p.md { font-size: 1.125rem; font-weight: 400; line-height: 1.4; } p.lg { font-size: 1.25rem; font-weight: 400; line-height: 1.4; } p.mono { text-transform: uppercase; font-family: "Instrument Sans"; font-size: 0.9rem; font-weight: 500; -webkit-font-smoothing: antialiased; } p.md.mono { font-size: 1rem; } p.lg.mono { font-size: 1.1rem; } a { text-decoration: none; font-size: 1rem; font-weight: 500; line-height: 1.4; color: var(--base-200); border-radius: 0.35rem; } span.spacer { display: inline-block; width: 20rem; } .container { width: 100%; height: 100%; padding: 2rem; max-width: 2000px; margin: 0 auto; } @media (max-width: 1000px) { h1 { font-size: 3rem; letter-spacing: -0.1rem; } h2 { font-size: 2rem; letter-spacing: -0.05rem; } h3 { font-size: 1.5rem; letter-spacing: -0.025rem; } .container { padding: 1rem; } } body.menu-open * { pointer-events: none; } body.menu-open .menu, body.menu-open .menu *, body.menu-open .menu-toggle { pointer-events: auto; }