/* Rework of https://antigravity.google/ using modern CSS */
/* See https://brm.us/antigravity for details */
@layer reset, tokens, base, components, layout, moderncss, util;

@layer moderncss {
	
	@layer misc {
		/* To make the bouncy scroll effect work when the page is shown in an iframe and when the user is already at the edges and nudging the scroller */
		:root {
			overscroll-behavior-y: contain;
		}
	}
	
	@layer layout {
		
		/* Professional continuously moving background with strong mouse interaction */
		@layer animated-background {
			#welcome {
				position: relative;
				overflow: hidden;
				background: #000000;
				--mouse-x: 50%;
				--mouse-y: 50%;
				--time: 0;
			}
			
			/* Multiple floating gradient orbs that move continuously */
			#welcome::before,
			#welcome::after {
				content: '';
				position: absolute;
				width: 800px;
				height: 800px;
				border-radius: 50%;
				pointer-events: none;
				z-index: 0;
				filter: blur(100px);
				opacity: 0.5;
				will-change: transform;
			}
			
			/* First floating orb - green glow (#87bd3f) */
			#welcome::before {
				background: radial-gradient(circle, rgba(135, 189, 63, 0.28) 0%, rgba(135, 189, 63, 0.08) 40%, transparent 70%);
				top: 15%;
				left: 5%;
				animation: continuousFloat1 18s linear infinite;
				transform: 
					translate(
						calc(var(--orb1-x, 0px) + 0px),
						calc(var(--orb1-y, 0px) + 0px)
					)
					scale(var(--orb1-scale, 1))
					rotate(var(--orb1-rotate, 0deg));
				transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1);
			}
			
			/* Second floating orb - greenish-blue (teal) glow */
			#welcome::after {
				background: radial-gradient(circle, rgba(52, 180, 165, 0.22) 0%, rgba(52, 180, 165, 0.06) 40%, transparent 70%);
				bottom: 20%;
				right: 10%;
				animation: continuousFloat2 22s linear infinite;
				transform: 
					translate(
						calc(var(--orb2-x, 0px) + 0px),
						calc(var(--orb2-y, 0px) + 0px)
					)
					scale(var(--orb2-scale, 1))
					rotate(var(--orb2-rotate, 0deg));
				transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1);
			}
			
			/* Dynamic background gradients - #87bd3f green + greenish-blue on black */
			#welcome {
				background-image: 
					radial-gradient(circle 500px at var(--grad1-x, 80%) var(--grad1-y, 30%), rgba(135, 189, 63, 0.1) 0%, transparent 50%),
					radial-gradient(circle 450px at var(--grad2-x, 30%) var(--grad2-y, 70%), rgba(52, 180, 165, 0.08) 0%, transparent 50%),
					radial-gradient(circle 600px at var(--grad3-x, 50%) var(--grad3-y, 50%), rgba(158, 211, 86, 0.06) 0%, transparent 60%),
					radial-gradient(circle 400px at var(--grad4-x, 70%) var(--grad4-y, 20%), rgba(52, 180, 165, 0.07) 0%, transparent 45%);
				background-size: 150% 150%;
				animation: continuousBackgroundMove 30s linear infinite;
				transition: background-position 0.3s ease-out;
			}
			
			/* Continuous floating animations - smooth infinite loops with larger movement */
			@keyframes continuousFloat1 {
				0% {
					transform: translate(0, 0) scale(1) rotate(0deg);
				}
				20% {
					transform: translate(120px, -100px) scale(1.25) rotate(72deg);
				}
				40% {
					transform: translate(180px, -60px) scale(0.85) rotate(144deg);
				}
				60% {
					transform: translate(100px, -150px) scale(1.2) rotate(216deg);
				}
				80% {
					transform: translate(-50px, -80px) scale(1.1) rotate(288deg);
				}
				100% {
					transform: translate(0, 0) scale(1) rotate(360deg);
				}
			}
			
			@keyframes continuousFloat2 {
				0% {
					transform: translate(0, 0) scale(1) rotate(0deg);
				}
				25% {
					transform: translate(-150px, 100px) scale(1.35) rotate(90deg);
				}
				50% {
					transform: translate(-100px, 150px) scale(0.8) rotate(180deg);
				}
				75% {
					transform: translate(-180px, 80px) scale(1.25) rotate(270deg);
				}
				100% {
					transform: translate(0, 0) scale(1) rotate(360deg);
				}
			}
			
			@keyframes continuousBackgroundMove {
				0% {
					background-position: 0% 0%, 100% 100%, 50% 50%, 100% 0%;
				}
				25% {
					background-position: 30% 25%, 70% 75%, 60% 40%, 80% 20%;
				}
				50% {
					background-position: 60% 50%, 40% 50%, 70% 30%, 60% 40%;
				}
				75% {
					background-position: 40% 75%, 60% 25%, 30% 70%, 40% 60%;
				}
				100% {
					background-position: 0% 0%, 100% 100%, 50% 50%, 100% 0%;
				}
			}
			
			/* Ensure content stays above background */
			#welcome > * {
				position: relative;
				z-index: 1;
			}
			
			/* Enhanced Houdini PaintWorklet support - keep for browsers that support it */
			@supports (background: paint(something)) {
				@layer particles {
					#welcome {
						--ring-radius: 150;
						--ring-thickness: 1000;
						--particle-count: 150;
						--particle-rows: 35;
						--particle-size: 3;
						--particle-color: rgba(135, 189, 63, 0.2);

						--particle-min-alpha: 0.3;
						--particle-max-alpha: 1;

						--seed: 400;

						background-image: paint(ring-particles),
							radial-gradient(circle 400px at 80% 30%, rgba(135, 189, 63, 0.06) 0%, transparent 50%),
							radial-gradient(circle 350px at 30% 70%, rgba(52, 180, 165, 0.05) 0%, transparent 50%),
							radial-gradient(circle 500px at 50% 50%, rgba(158, 211, 86, 0.04) 0%, transparent 60%);
					}
				}
				
				@layer animation {
					@property --animation-tick { syntax: '<number>'; inherits: false; initial-value: 0; }
					@property --ring-radius { syntax: '<number> | auto'; inherits: false; initial-value: auto; }
					@property --ring-opacity { syntax: '<number>'; inherits: false; initial-value: 0.6; }
					
					@keyframes ripple { 
						0% { --animation-tick: 0; --ring-opacity: 0.6; }
						50% { --animation-tick: 0.5; --ring-opacity: 0.9; }
						100% { --animation-tick: 1; --ring-opacity: 0.6; }
					}
					
					@keyframes ring { 
						0% { --ring-radius: 120; }
						25% { --ring-radius: 200; }
						50% { --ring-radius: 250; }
						75% { --ring-radius: 180; }
						100% { --ring-radius: 120; }
					}
					
					#welcome {
						animation: ripple 10s cubic-bezier(0.4, 0, 0.6, 1) infinite,
						           ring 15s cubic-bezier(0.34, 1.56, 0.64, 1) infinite;
					}
				}
				
				@layer follow-mouse {				
					@property --ring-x { syntax: '<number>'; inherits: false; initial-value: 50; }
					@property --ring-y { syntax: '<number>'; inherits: false; initial-value: 50; }
					@property --ring-interactive { syntax: '<number>'; inherits: false; initial-value: 0; }
					
					#welcome {
						transition: --ring-x 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
						            --ring-y 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
					}
				}
			}
		}
		
		/* Draw some dynamic noise behind some of the screens */
		/* I am using Houdini PaintWorklets for this */
		@layer speckled-backgrounds {
			@supports (background: paint(something)) {
				#beforeyougo .card,
				#who > div {
			    --extra-confettiNumber: 250;
  			  --extra-confettiLengthVariance: 1;
			    --extra-confettiWeightVariance: 1;
    			background-image: paint(extra-confetti);
				}
			}
		}
		
		@layer product {
			/* @TODO: Move `container-type: inline-size` for centered sticky using cqi to here, as that is modern CSS */
		}
	}
	
	@layer components {
		@layer button {
			
			/* Buttons in .dark containers have inverted colors */
			@scope (.dark) {
				button {
					color: var(--theme-surface-on-surface);
					background: var(--theme-primary-on-primary);
					border: 1px solid var(--theme-outline-variant);

					&:hover,
					&:focus-visible {
						background: var(--theme-button-secondary-hover);
					}
					
					&.secondary {						
						color: var(--theme-surface-surface);
				    background: var(--theme-nav-button-hover);
			
						&:hover,
						&:focus-visible {
							background: var(--theme-button-secondary-inverse-hover);
						}
					}
				}
			}
		}
		
		@layer navbar {	
			/* Anchor the mobile nav underneath the header */
			@layer mobile {
				@media (width < 930px) {
					header {
						anchor-name: --header;
					}
					
					header nav {
						position: fixed;
						inset: auto;
						top: 0; /* Undo non-modern-CSS styling */
						position-anchor: --header;
						position-area: bottom;
						justify-self: stretch;
						align-self: stretch;
					}
				}
			}
			
			/* Animate-in the nav on mobile when showing */
			@layer mobile {
				@media (width < 930px) {
					header nav {
						transition: opacity .15s ease-in;
						@starting-style {
							opacity: 0;
						}
					}
				}
			}
			
			/* Don’t scroll page when menu is open */
			@media (width < 930px) {
				header:has(.menu-checkbox:checked) {
					&,
					& nav {
						overflow: auto;
						overscroll-behavior: contain;
					}
				}
			}
			
			/* Hidey bar – http://brm.us/hidey-bar-2 */
			@layer hidey-bar {
				html {
					container-type: scroll-state;
				}
				.header-wrapper:not(.header-wrapper:has(.menu-checkbox:checked)) {
					transition: translate 0.25s;
					translate: 0 0;

					@container scroll-state(scrolled: bottom) {
						translate: 0 -100%;
					}
				}
			}
		}
		
		@layer carousel {
			@layer scroll-snapping {
				@layer base-setup {
					@supports (scroll-padding-inline: 3rem) {
						.carousel {
							scroll-padding-inline: 3rem;
							scroll-snap-type: x mandatory;

							> * {
								scroll-snap-align: start;
							}

							/* @NOTE: On the orignal page the last item also snaps to the left */
							/* To get this working, I’d manually add some padding to the right */
							/* Defining that “some” is tricky and requires manual calculation */
							/* Here I am calculating 40vi (because the entries are 60vi) minus gap */
							/* So maybe we should have `auto` on scroll-padding do something? */
							@media (width >= 930px) {
								padding-inline: 3rem calc(40vi - 3rem);
							}
						}
					}
				}
				
				@layer snapped-effects {
					/* @note: The typewriter effect is done with scroll-triggered animations, but could as well be done with snapped state queries */	
					
					.carousel > * {
						container-type: scroll-state;
						
						@supports (container-type: scroll-state) {
							/* The images */
							> figure {
								opacity: .25;								
								transition: opacity .5s ease;

								@container scroll-state(snapped: x) {
									opacity: 1;
								}
							}
							
							/* The bylines */
							> *:not(figure) {
								transition: opacity .5s ease, translate .5s ease;
								transition-delay: 0s;
								opacity: 0;			
								translate: 0 calc(0.5rem * (sibling-index() - 1)) 0;

								@container scroll-state(snapped: x) {
									transition-delay: 0.2s; /* NOTE: It feels like CSS snapped is triggering while it’s still scrolling, so we delay it a bit */
									opacity: 1;
									translate: 0 0 0;
								}
							}
						}
					}
				}
			}
			
			@layer niceties {
				.carousel {
					scrollbar-width: none;
					overscroll-behavior-x: contain;
				}
			}
			
			@layer scroll-buttons {
				/* @note: https://chrome.dev/carousel-configurator/ really helps here */
				.carousel {
					position: relative;
					scroll-behavior: smooth;
					anchor-name: --carousel;
				
					&::scroll-button(*) {
						position: fixed;
						position-anchor: --carousel;
						position-visibility: always;
						font-family: "Material Symbols Outlined";
						
						color: var(--theme-surface-on-surface);
						background: var(--theme-tonal-tonal);
						border: none;
						block-size: 2em;
						font-size: 1.3em;
						inline-size: 2.5em;
						display: flex;
						align-items: center;
						justify-content: center;
						cursor: pointer;
						border-radius: 999px;
						
						transition: opacity 0.25s ease;
					}
					
					/* @note: We currently can’t nest this inside `&::scroll-button(*)` because of how CSS Nesting works */
					&::scroll-button(*):hover {
						background: #eff0f3;
					}
					&::scroll-button(*):disabled {
						cursor: not-allowed;
						opacity: 0.25;
					}

					/* @note: We deviate from the antigravity site here, because CSS carousel does not offer a wrapper around both scroll buttons … */
					&::scroll-button(left) {
						translate: -50% 0;
						content: 'arrow_back' / 'Previous';
					}
					&::scroll-button(right) {
						translate: 50% 0;
						content: 'arrow_forward' / 'Next';
					}
					
					@media (width < 930px) {
						&::scroll-button(left),
						&::scroll-button(right) {
							position-area: center center;
							align-self: end;
						}
					}
					
					@media (width >= 930px) {
						&::scroll-button(left),
						&::scroll-button(right) {
							position-area: center center;
							align-self: start;
							justify-self: start;
							/* Magic numbers … these rely on the flex-basis of the slides + the aspect-ratio of the photos. Nasty, but it works. */
							left: calc(60vi - 1em);
							top: calc((60vi + 1em) * 9 / 16);
						}
					}
				}
			}
		}
	}
	
	@layer animations {
		@layer revealing-welcome-items {
			@keyframes welcomeTextIn {
				from {
					opacity: 0;
					transform: translateY(56px);
				}
				to {
					opacity: 1;
					transform: translateY(0);
				}
			}
			
			#welcome .welcome-content {
				animation: welcomeTextIn 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
			}
			
			/* Keep typewriter word hidden until 1.5s, then show so typing is visible from first character */
			@keyframes typewriterWordReveal {
				to { opacity: 1; }
			}
			
			#welcome .typewriter-word {
				opacity: 0;
				animation: typewriterWordReveal 0.001s linear 1.5s forwards;
			}
			
			#welcome {
				svg, .cta {
					transition: translate 0.5s ease, opacity 0.5s ease;
					@starting-style {
						translate: 0 50% 0;
						opacity: 0;
					}
				}
			}
		}
		
		@layer scroll-triggered-typewriter-effect {
			@supports (timeline-trigger-name: --t) {
				
				/* @ref https://codepen.io/bramus/pen/JjwxLNM */
				@keyframes blink {
					from { opacity: 0; }
				}
				@keyframes text {
					from { background-size: 0 }
				}
				
				/* Typewriter effect */
				.typewriter {
					background: 
						/* highlight text */
						linear-gradient(90deg, var(--typewriter-text-color, var(--theme-surface-on-surface)) 0 0) 0 / calc(var(--n, 100) * 1ch) no-repeat 
						/* faded text */
						transparent;
					-webkit-background-clip: text;
					color: transparent;
					animation: text 2s ease-in both;

					&::after {
						content: "|";
						--hdr-gradient: linear-gradient(
							in oklch,
							oklch(80% .3 34),
							oklch(90% .3 200)
						);
						--sdr-gradient: linear-gradient(#ff4700, #0ff);

						background: var(--hdr-gradient);
						background-clip: text;
						color: transparent;

						/* The delay is manually calculated to make the animation only start after the typewriter itself has finished */
						animation: blink 0.2s 1.4s ease infinite alternate both;
					}
				}
				
				/* Typewriter Trigger in product section */
				#product *:has(> .typewriter) {
					timeline-trigger: --t view() cover 30% cover 1000%;
					trigger-scope: --t;
					
					.typewriter {					
						animation-trigger: --t play-once;
						&::after {
							animation-trigger: --t play-once;
							animation-delay: 1.6s;
						}
					}
				}
				
				/* Typewriter Trigger in Carousel */
				.carousel > * {
					timeline-trigger: --t view(inline)
						entry 90% exit 50%;
					trigger-scope: --t;
					
					.typewriter {
						--typewriter-text-color: white;
						animation-trigger: --t play-forwards reset;
						animation-duration: 1.5s;
						
						&::after {
							animation-trigger: --t play-forwards reset;
							animation-delay: 0.9s;
						}
					}
				}
				
				/* Typewriter Trigger in Before You Go */
				#beforeyougo > .card {
					timeline-trigger: --t view() cover 30% cover 1000%;
					trigger-scope: --t;
					
					.typewriter {
						--typewriter-text-color: white;
						animation-trigger: --t play-once;
						animation-duration: 2s;
						
						&::after {
							animation-trigger: --t play-once;
							animation-delay: 1s;
						}
					}
				}
			}
		}
		
		@layer moving-icons {
			@layer slide-in {
				@keyframes slide-in { from { translate: 100% 0 0; } }
				#product .icons {
					timeline-trigger: --t view() cover 30% cover 1000%;
					trigger-scope: --t;				
					animation: slide-in 1s ease both;
					animation-trigger: --t play-once;
				}
			}
			@layer wobble {
				@keyframes wobble {
					from {
						translate: 0 75%;
					}
					to {
						translate: 0 -75%;
					}
				}

				#product .icon {
					/* @NOTE: If we had support for random(), we could even randomize the animation distance per element */
					animation: wobble 4s ease infinite alternate;
					animation-delay: calc(mod(sibling-index(), 5) * -1s);
				}
			}
		}
		
		@layer product-features {
			/* Scroll-triggered fading of the text + images */
			@supports (timeline-trigger-name: --t) {
				@keyframes fade-a-bit {
					from { opacity: 0.3; }
					to { opacity: 1; }
				}

				@keyframes fake-clip-it {
					to { scale: 100% 0%; }
				}
				
				@keyframes fade-in {
					from { opacity: 0; }
				}

				@media (width >= 930px) {
					#features .feature {
						timeline-trigger: --t view() entry 100% cover 50%;
						trigger-scope: --t;

						h3 {
							animation: fade-a-bit 500ms ease both;
							animation-trigger: --t play-forwards play-backwards;
						}

						p {
							position: relative;

							&::after {
								content: '';
								position: absolute;
								bottom: 0;
								left: 0;
								right: 0;
								height: 100%;
								transform-origin: 0 100%;
								background: #000000;
								animation: fake-clip-it 500ms ease both;
								animation-trigger: --t play-forwards play-backwards;
							}
						}
						
						/* Exclude the first one, because that one is always visible */
						img:not(.feature:first-child img) {
							animation: fade-in 500ms ease both;
							animation-trigger: --t play-forwards play-backwards; /* TODO: Don’t fade out the underlying ones */
						}
					}
				}
			}

			/* @TODO: Scroll-Driven unclipping of the image-wrapper (on the first image) */
		}
		
		@layer scroll-driven-animations {
			/* @note: We also check for range support. See https://brm.us/sda-feature-detection for details */
			@supports ((animation-timeline: scroll()) and (animation-range: 0% 100%)) {
				@keyframes scale-up {
					from {
						scale: 0.85;
					}
				}
				#beforeyougo .card {
					animation: scale-up linear both;
					animation-timeline: view();
					animation-range: entry 50% entry 100%;
				}
			}
		}
	}
}

@layer components {
	@layer button {
		button {
			background: var(--theme-primary-primary);
   		color: var(--theme-primary-on-primary);
			border: 0px;
			border-radius: 999px;
			padding: 0.6em 1.5em;
			
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
			gap: 0.4rem;
			
			font-size: 0.9em;
			
			cursor: pointer;
			transition: .15s background ease-out;
			
			&:hover,
			&:focus-visible {
				background: var(--theme-button-states-primary-hovered);
			}
			
			&:has(span + .material-symbols-outlined) {
				padding-inline-end: 1em;
			}
			
			&:has(.material-symbols-outlined + span) {
				padding-inline-start: 1em;
			}
			
			&.secondary {
				color: var(--theme-surface-on-surface);
				background: transparent;
				border: 1.5px solid var(--theme-outline-variant);
				box-shadow: none;
				
				&:hover,
				&:focus-visible {
					background: var(--theme-button-secondary-hover);
					border-color: var(--theme-surface-on-surface-variant);
					transform: translateY(-1px);
					box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
				}
				
				&:active {
					background: var(--theme-button-secondary-hover);
				}
			}
		}
	}
	
	@layer navbar {
		@layer shared {
			nav ul {
				list-style: none;
				margin: 0;
				padding: 0;
			}
			
			.menu-checkbox {
				display: none;
			}
			
			nav a {
				color: var(--theme-surface-on-surface);
				transition: color 0.2s ease;
				text-decoration: none;
				position: relative;
				display: inline-block;
				padding-bottom: 0.35em;

				&::after {
					content: '';
					position: absolute;
					left: 0;
					bottom: 0;
					width: 100%;
					height: 2px;
					background: #87bd3f;
					transform: scaleX(0);
					transform-origin: 0 100%;
					transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
				}

				&:hover,
				&:focus-visible {
					color: var(--theme-surface-on-surface);
				}
				&:hover::after,
				&:focus-visible::after {
					transform: scaleX(1);
				}
			}
		}
		@layer mobile {
			@media (width < 930px) {
				.menu-button {
					cursor: pointer;
					width: 3.5em;
					border-radius: 999px;
					text-align: center;
					place-content: center;
					color: #ffffff;

					transition: .15s background ease-out;

					&:hover,
					&:focus-visible {
						background: var(--theme-button-states-hovered);
					}
				}
				header nav {
					display: none;
				}
			
				header nav li {
					font-size: 1.85em;
					font-weight: 350;
					border-bottom: 1px solid var(--theme-surface-surface-container-higher);
					
					&:first-child {
						border-top: 1px solid var(--theme-surface-surface-container-higher);
					}
				}
			
				header nav a {
					display: block;

					padding-inline: 3rem;
					padding-block: 1.5rem;
				}
				
				/* When the menu toggle is checked */
				.menu-checkbox:checked {
					/* Show the nav */
					& ~ nav {
						position: fixed;
						inset: 0;
						top: 2.75em; /* This is a guess for how tall the topbar is */
						display: flex;
						flex-direction: column;
						align-items: stretch;
						justify-content: flex-start;
						background: #000000;
						z-index: 9998;
						overflow-y: auto;
						padding-top: 1rem;
					}
					& ~ nav ul {
						display: flex;
						flex-direction: column;
						gap: 0;
						flex: 1;
					}
					
					/* Show the proper icon in the button */
					& ~ .menu-button {
						[data-show-when="closed"] {
							display: none !important;
						}
					}
					
					/* Colorize the button differently */
					& ~ .menu-button {
						background: var(--theme-primary-primary);
				    color: var(--theme-primary-on-primary);
						
						&:hover,
						&:focus-visible {
							background: var(--theme-button-states-primary-hovered);
						}
					}
				}
				
				/* When the menu toggle is not checked */
				.menu-checkbox:not(:checked) {
						/* Show the proper icon in the button */
						& ~ .menu-button {
						[data-show-when="open"] {
							display: none !important;
						}
					}
				}
				
				/* Hide the download button */
				header button {
					display: none;
				}
			}
		}
		
		/* Large Menu */
		@layer large {
			@media (width >= 930px) {
				header {
					position: relative;
				}
				
				nav {
					position: absolute;
					left: 50%;
					transform: translateX(-50%);
				}
				
				nav ul {
					display: flex;
					flex-direction: row;
					gap: 2.25rem;
					align-self: flex-start;
				}
				
				nav a {			
					width: max-content;
					padding: 0.6em 0 0.35em;
					border-radius: 0;
					color: var(--theme-surface-on-surface-variant);
					white-space: nowrap;
					
					&:hover,
					&:focus-visible {
						color: #000;
						background: transparent;
					}
				}
				.menu-button {
					display: none;
				}
			}
		}
	}
	
	@layer card {
		.card {
			border-radius: 2em;
			
			&.dark {
				background: var(--theme-primary-primary);
	   		color: var(--theme-surface-surface);
			}
		}
	}
}

@layer layout {
	@layer grid {
		body {
			margin: 0;
			display: grid;
			grid-template-columns:
				[fullbleed-start]
				3rem
				[main-start]
				1fr
				[main-end]
				3rem
				[fullbleed-end];
			grid-auto-rows: min-content;
		}
		
		body > * {
			grid-column: fullbleed;
		}
	}
	
	@layer navigation {
		.header-wrapper {
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			background: transparent;
			z-index: 1000;
			overflow: hidden;
			box-shadow: 0 0 0 rgba(0, 0, 0, 0);
			border-bottom: 1px solid rgba(0, 0, 0, 0);
			transition: box-shadow 0.7s cubic-bezier(0.4, 0, 0.2, 1),
			            border-bottom 0.7s cubic-bezier(0.4, 0, 0.2, 1);
			
			&::before {
				content: '';
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				background: rgba(255, 255, 255, 0);
				backdrop-filter: blur(0px) saturate(100%);
				-webkit-backdrop-filter: blur(0px) saturate(100%);
				opacity: 0;
				transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1),
				            backdrop-filter 0.7s cubic-bezier(0.4, 0, 0.2, 1),
				            -webkit-backdrop-filter 0.7s cubic-bezier(0.4, 0, 0.2, 1),
				            background 0.7s cubic-bezier(0.4, 0, 0.2, 1);
				pointer-events: none;
				z-index: -1;
			}
			
			/* When scrolled: black background, white text – same look as at top */
			&.scrolled {
				box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06);
				&::before {
					background: #000000;
					backdrop-filter: none;
					-webkit-backdrop-filter: none;
					opacity: 1;
				}
			}
			
			/* Force header visible when at first screen (overrides hidey-bar) */
			&.header-at-first-screen {
				translate: 0 0 !important;
			}

			/* Allow open mobile menu to extend outside header */
			&:has(.menu-checkbox:checked) {
				overflow: visible;
			}
			
			/* Light nav text (white) – same at top and when scrolled */
			nav a {
				color: rgba(255, 255, 255, 0.9);
			}
			nav a:hover,
			nav a:focus-visible {
				color: #fff;
				background: transparent;
			}
			nav a:hover::after,
			nav a:focus-visible::after {
				transform: scaleX(1);
			}
		}
		
		header {
			display: flex;
			flex-direction: row;
			gap: 2rem;
			align-items: center;
			
			padding-inline: clamp(1.5rem, 4vw, 3rem);
			padding-block: 1.5rem 1rem;
			
			img {
				height: 40px;
				width: auto;
				margin-inline-start: 1.25rem;
				transition: opacity 0.2s ease;
				
				&:hover {
					opacity: 0.8;
				}
			}
			
			.menu-button {
				margin-left: auto;
				position: relative;
				z-index: 9999;
			}
		}
	}
	
	@layer welcome {
		.welcome-section-wrap {
			position: relative;
			min-height: 100dvh;
		}
		#welcome {
			display: flex;
			flex-direction: row;
			align-items: center;
			/* justify-content: space-between; */
			gap: 4rem;
			padding: 4rem clamp(2rem, 6vw, 6rem);
			position: relative;
			min-height: 100dvh;
			box-sizing: border-box;
			
			.welcome-content {
				flex: 1 1 auto;
				max-width: 58%;
				display: flex;
				flex-direction: column;
				align-items: flex-start;
				justify-content: center;
				gap: 2rem;
				margin-inline-start: 1.75rem;
				opacity: 0;
				position: relative;
			}
			.rotating-text {
				font-size: clamp(2rem, 4.5vw, 5rem);
				text-align: left;
				font-weight: 600;
				line-height: 1.2;
				margin: 0 0 0 -3.5rem;
				max-width: 900px;
				color: #e4e4e7;
				letter-spacing: -0.02em;
				width: max-content;
				
				.typewriter-word {
					color: #87bd3f;
					font-weight: 600;
					position: relative;
					display: inline-block;
					min-width: 200px;
				}
			}

			@media (width < 768px) {
				#welcome {
					padding-left: 1rem;
					padding-right: 1.5rem;
				}

				.welcome-content {
					max-width: 100%;
					margin-inline-start: 0;
				}

				.rotating-text {
					margin-left: 0;
					text-align: left;
				}
			}
			
			@keyframes blink {
				0%, 50% {
					opacity: 1;
				}
				51%, 100% {
					opacity: 0;
				}
			}
			
			.services-scroll-container {
				flex: 0 0 auto;
			}
			@media (width < 900px) {
				.welcome-content {
					padding-left: 1.5rem;
					padding-right: 1.5rem;
					box-sizing: border-box;
				}
			}
		}
		
		.welcome-scroll-prompt {
			position: absolute;
			bottom: 1.5rem;
			left: 50%;
			transform: translateX(-50%);
			display: inline-flex;
			flex-direction: column;
			align-items: center;
			gap: 0.35rem;
			color: #ffffff;
			text-decoration: none;
			font-size: 0.9rem;
			font-weight: 600;
			z-index: 100;
			pointer-events: auto;
			opacity: 1;
		}
		.welcome-scroll-prompt:hover {
			color: #ffffff;
			opacity: 0.95;
		}
		.welcome-scroll-prompt-arrow {
			font-size: 1.75rem !important;
			width: 1.75rem;
			height: 1.75rem;
			color: #87bd3f;
			animation: scrollBounce 2s ease-in-out infinite;
		}
		@keyframes scrollBounce {
			0%, 100% { transform: translateY(0); }
			50% { transform: translateY(6px); }
		}
	}
	
	@layer video {
		#video {
			padding: 4rem clamp(1rem, 4vw, 3rem);
			display: flex;
			justify-content: center;
			align-items: center;
			
			iframe {
				width: 100%;
				height: auto;
				aspect-ratio: 16/9;
				max-width: 1200px;
				max-height: 75vh;
				
				border-radius: 1.5em;
				overflow: clip;
				transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s ease;
				box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
				border: 1px solid rgba(0, 0, 0, 0.05);
				
				&:hover {
					transform: translateY(-4px);
					box-shadow: 0 16px 48px rgba(0, 0, 0, 0.18);
				}
			}
		}
	}
	
	@layer product {
		/* What we do section: sticky center title, content scrolls over it */
		#product.what-we-do-section {
			display: block;
			grid-template-columns: unset;
			gap: 0;
			min-height: auto;
			position: relative;
			color: #ffffff;
			background: #000000;
		}

		#who-we-are.who-we-are-section .what-we-do-title {
			color: #87bd3f;
		}

		/* Sticky animated background – always stays behind Who we are while scrolling */
		#who-we-are {
			position: relative;
			background: #000000;
		}
		#who-we-are .who-we-are-bg {
			position: sticky;
			top: 0;
			height: 100vh;
			width: 100%;
			margin-bottom: -100vh;
			z-index: 0;
			overflow: hidden;
			background: #000000;
			opacity: 0;
			transition: opacity 0.7s ease-out;
		}
		#who-we-are.title-in-place .who-we-are-bg {
			opacity: 1;
		}
		#who-we-are .who-we-are-bg {
			background-image:
				radial-gradient(circle 500px at var(--grad1-x, 80%) var(--grad1-y, 30%), rgba(135, 189, 63, 0.1) 0%, transparent 50%),
				radial-gradient(circle 450px at var(--grad2-x, 30%) var(--grad2-y, 70%), rgba(52, 180, 165, 0.08) 0%, transparent 50%),
				radial-gradient(circle 600px at var(--grad3-x, 50%) var(--grad3-y, 50%), rgba(158, 211, 86, 0.06) 0%, transparent 60%),
				radial-gradient(circle 400px at var(--grad4-x, 70%) var(--grad4-y, 20%), rgba(52, 180, 165, 0.07) 0%, transparent 45%);
			background-size: 150% 150%;
			animation: continuousBackgroundMove 30s linear infinite;
			transition: background-position 0.3s ease-out, opacity 0.7s ease-out;
		}
		#who-we-are .who-we-are-bg::before,
		#who-we-are .who-we-are-bg::after {
			content: '';
			position: absolute;
			width: 800px;
			height: 800px;
			border-radius: 50%;
			pointer-events: none;
			z-index: 0;
			filter: blur(100px);
			opacity: 0.5;
			will-change: transform;
			transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1);
		}
		#who-we-are .who-we-are-bg::before {
			background: radial-gradient(circle, rgba(135, 189, 63, 0.28) 0%, rgba(135, 189, 63, 0.08) 40%, transparent 70%);
			top: 15%;
			left: 5%;
			animation: continuousFloat1 18s linear infinite;
			transform: translate(calc(var(--orb1-x, 0px) + 0px), calc(var(--orb1-y, 0px) + 0px)) scale(var(--orb1-scale, 1)) rotate(var(--orb1-rotate, 0deg));
		}
		#who-we-are .who-we-are-bg::after {
			background: radial-gradient(circle, rgba(52, 180, 165, 0.22) 0%, rgba(52, 180, 165, 0.06) 40%, transparent 70%);
			bottom: 20%;
			right: 10%;
			animation: continuousFloat2 22s linear infinite;
			transform: translate(calc(var(--orb2-x, 0px) + 0px), calc(var(--orb2-y, 0px) + 0px)) scale(var(--orb2-scale, 1)) rotate(var(--orb2-rotate, 0deg));
		}
		#who-we-are .what-we-do-title-layer { z-index: 1; }
		#who-we-are .what-we-do-content { z-index: 1; }
		#who-we-are .what-we-do-title-layer,
		#who-we-are .what-we-do-content,
		#who-we-are .who-we-are-bg {
			opacity: var(--who-opacity, 1);
			transition: opacity 0.15s ease-out;
		}
		#who-we-are.who-faded .what-we-do-title-layer,
		#who-we-are.who-faded .what-we-do-content,
		#who-we-are.who-faded .who-we-are-bg {
			pointer-events: none;
		}

		#who-we-are .who-we-are-content {
			max-width: none;
			padding-left: clamp(2rem, 6vw, 4rem);
			padding-right: clamp(2rem, 6vw, 4rem);
		}
		#who-we-are .who-we-are-layout {
			display: flex;
			flex-direction: column;
			gap: clamp(4rem, 12vh, 8rem);
			max-width: 90rem;
			margin: 0 auto;
		}
		#who-we-are .who-we-are-row {
			display: grid;
			grid-template-columns: 1fr minmax(200px, 26%);
			gap: clamp(2rem, 5vw, 4rem);
			align-items: start;
			min-width: 0;
		}
		#who-we-are .who-we-are-row-right {
			grid-template-columns: minmax(200px, 26%) 1fr;
		}
		#who-we-are .who-we-are-row-right .who-we-are-block {
			order: 2;
		}
		#who-we-are .who-we-are-row-right .who-we-are-visual {
			order: 1;
			margin-left: 0;
			margin-right: auto;
		}
		#who-we-are .who-we-are-visual {
			position: relative;
			width: 100%;
			max-width: 280px;
			aspect-ratio: 1;
			max-height: min(55vh, 320px);
			display: flex;
			align-items: center;
			justify-content: center;
			margin-left: auto;
		}
		#who-we-are .who-we-are-brain {
			width: 100%;
			height: 100%;
			object-fit: contain;
			filter: drop-shadow(0 0 60px rgba(135, 189, 63, 0.35));
		}
		#who-we-are .who-we-are-block {
			position: relative;
			z-index: 1;
			box-sizing: border-box;
			min-width: 0;
		}
		#who-we-are .who-we-are-label {
			display: block;
			font-size: clamp(0.7rem, 1vw, 0.8rem);
			font-weight: 600;
			letter-spacing: 0.2em;
			text-transform: uppercase;
			color: #87bd3f;
			margin-bottom: 1rem;
		}
		#who-we-are .who-we-are-headline {
			font-size: clamp(1.75rem, 3.2vw, 2.75rem);
			font-weight: 700;
			color: #ffffff;
			line-height: 1.2;
			letter-spacing: -0.03em;
			margin: 0 0 1.5rem;
			max-width: 28ch;
		}
		#who-we-are .who-we-are-text {
			font-size: clamp(0.95rem, 1.1vw, 1.1rem);
			line-height: 1.7;
			color: rgba(255, 255, 255, 0.75);
			margin: 0 0 1.25rem;
			max-width: 65ch;
		}
		#who-we-are .who-we-are-quote {
			border-left: 4px solid #87bd3f;
			padding-left: 1.25rem;
			margin: 1.5rem 0 1.25rem;
			font-size: clamp(1rem, 1.1vw, 1.1rem);
			line-height: 1.6;
			color: #ffffff;
			font-weight: 600;
			font-style: normal;
			max-width: 62ch;
		}
		@media (max-width: 900px) {
			#who-we-are .who-we-are-row {
				grid-template-columns: 1fr;
			}
			#who-we-are .who-we-are-row-right {
				grid-template-columns: 1fr;
			}
			/* Image above heading for all rows on small screens */
			#who-we-are .who-we-are-row-left .who-we-are-visual {
				order: 1;
			}
			#who-we-are .who-we-are-row-left .who-we-are-block {
				order: 2;
			}
			#who-we-are .who-we-are-row-right .who-we-are-block,
			#who-we-are .who-we-are-row-right .who-we-are-visual {
				order: unset;
				margin-left: auto;
			}
			#who-we-are .who-we-are-visual {
				max-height: 40vh;
				margin-left: auto;
				margin-right: auto;
			}
			#who-we-are .who-we-are-headline {
				max-width: none;
			}
		}
		
		.what-we-do-title-layer {
			position: sticky;
			top: 0;
			height: 100vh;
			display: flex;
			align-items: center;
			justify-content: center;
			z-index: 0;
			pointer-events: none;
			margin-bottom: -100vh;
		}
		
		.what-we-do-title {
			font-size: clamp(3.5rem, 14vw, 10rem);
			font-weight: 700;
			color: #ffffff;
			margin: 0;
			letter-spacing: -0.03em;
			line-height: 1;
			transition: filter 0.45s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.45s cubic-bezier(0.4, 0, 0.2, 1);
		}
		
		.what-we-do-title.blurred {
			filter: blur(10px);
			opacity: 0.25;
		}
		
		.what-we-do-content {
			position: relative;
			z-index: 1;
			padding: 100vh clamp(1.5rem, 5vw, 3rem) 60vh;
			display: flex;
			flex-direction: column;
			gap: 0;
			max-width: 75rem;
			margin: 0 auto;
		}
		#product .what-we-do-content {
			padding-bottom: 12vh;
		}
		#product .what-we-do-title-layer,
		#product .what-we-do-content {
			transition: opacity 0.15s ease-out, visibility 0.15s ease-out;
		}
		#product.past-services .what-we-do-title-layer,
		#product.past-services .what-we-do-content {
			visibility: hidden;
			opacity: 0;
			pointer-events: none;
		}
		
		.what-we-do-connector {
			position: absolute;
			top: 100vh;
			bottom: 60vh;
			right: clamp(qrem, 10%, 6rem);
			width: 100px;
			height: auto;
			pointer-events: none;
			opacity: 0.85;
		}
		
		.what-we-do-intro {
			display: flex;
			flex-direction: column;
			margin-bottom: clamp(4rem, 10vh, 6rem);
			/* padding: clamp(3rem, 10vh, 6rem) clamp(4.5em, 4vw, 3rem); */
			position: relative;
			z-index: 1;
			box-sizing: border-box;
		}
		
		.what-we-do-intro-title {
			display: block;
			width: 100%;
			text-align: center;
			font-size: clamp(1.85rem, 4vw, 2.75rem);
			font-weight: 700;
			color: #ffffff;
			line-height: 1.2;
			letter-spacing: -0.03em;
			margin-bottom: 1em;
			white-space: nowrap;
		}
		
		@media (max-width: 700px) {
			.what-we-do-intro-title {
				white-space: normal;
			}
		}
		
		.what-we-do-intro-text {
			display: block;
			width: 100%;
			max-width: 68ch;
			margin-left: auto;
			margin-right: auto;
			font-size: clamp(1.05rem, 1.25vw, 1.2rem);
			line-height: 1.65;
			color: rgba(255, 255, 255, 0.88);
			margin-top: 0;
			margin-bottom: 0;
			font-weight: 400;
			text-align: center;
		}
		
		.what-we-do-point {
			display: flex;
			flex-direction: row;
			align-items: center;
			gap: clamp(2rem, 5vw, 4rem);
			margin-bottom: clamp(2rem, 0vh, 4rem);
			position: relative;
			z-index: 1;
		}
		
		.what-we-do-point:last-child {
			margin-bottom: 0;
		}
		
		.what-we-do-expertise {
			width: 100%;
			align-self: stretch;
			text-align: center;
			padding: clamp(4rem, 12vh, 8rem) clamp(2rem, 4vw, 2.5rem);
			position: relative;
			z-index: 1;
		}
		
		.what-we-do-expertise-title {
			font-size: clamp(1.75rem, 3.5vw, 2.5rem);
			font-weight: 700;
			color: #ffffff;
			line-height: 1.25;
			letter-spacing: -0.03em;
			margin: 0 auto clamp(3rem, 8vh, 5rem);
			max-width: 28ch;
			text-align: center;
			opacity: 0;
			transform: translateY(24px);
			transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1), transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
		}
		
		.what-we-do-expertise.in-view .what-we-do-expertise-title {
			opacity: 1;
			transform: translateY(0);
		}
		
		.expertise-grid {
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			gap: clamp(3rem, 8vw, 5rem);
			width: 100%;
			max-width: 100rem;
			margin: 0 auto;
		}
		
		.expertise-card {
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			text-align: left;
			padding: 0;
			opacity: 0;
			transform: translateY(48px) scale(0.92);
			transition:
				opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),
				transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
		}
		
		.what-we-do-expertise.in-view .expertise-card {
			opacity: 1;
			transform: translateY(0) scale(1);
		}
		
		.what-we-do-expertise.in-view .expertise-card:nth-child(1) { transition-delay: 0.12s; }
		.what-we-do-expertise.in-view .expertise-card:nth-child(2) { transition-delay: 0.28s; }
		.what-we-do-expertise.in-view .expertise-card:nth-child(3) { transition-delay: 0.44s; }
		.what-we-do-expertise.in-view .expertise-card:nth-child(4) { transition-delay: 0.6s; }
		.what-we-do-expertise.in-view .expertise-card:nth-child(5) { transition-delay: 0.76s; }
		.what-we-do-expertise.in-view .expertise-card:nth-child(6) { transition-delay: 0.92s; }
		
		.expertise-card-icon {
			width: 8.25rem;
			height: 8.25rem;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-bottom: 1.25rem;
		}
		
		.expertise-card-icon img {
			width: 100%;
			height: 100%;
			object-fit: contain;
			display: block;
		}
		
		.expertise-card-icon .material-symbols-outlined {
			font-size: 1.75rem !important;
			width: 1.75rem;
			height: 1.75rem;
			color: #ffffff;
			opacity: 0.9;
		}
		
		.expertise-card-title {
			font-size: clamp(1.15rem, 1.5vw, 1.35rem);
			font-weight: 700;
			color: #ffffff;
			margin: 0 0 0.75rem;
			line-height: 1.25;
			letter-spacing: -0.02em;
		}
		
		.expertise-card-desc {
			font-size: clamp(0.9rem, 1.05vw, 1rem);
			line-height: 1.6;
			color: rgba(255, 255, 255, 0.82);
			margin: 0;
			font-weight: 400;
		}
		
		@media (width < 900px) {
			.expertise-grid {
				grid-template-columns: repeat(2, 1fr);
			}
			.expertise-card {
				align-items: center;
				text-align: center;
			}
			.expertise-card-icon {
				margin-left: auto;
				margin-right: auto;
			}
			.expertise-card-title {
				text-align: center;
			}
			.expertise-card-desc {
				text-align: center;
			}
		}
		
		@media (width < 560px) {
			.expertise-grid {
				grid-template-columns: 1fr;
			}
		}
		
		.what-we-do-point.point-image-left {
			flex-direction: row;
		}
		
		.what-we-do-point.point-image-right {
			flex-direction: row-reverse;
		}
		
		.what-we-do-point .point-visual {
			flex: 0 0 clamp(200px, 28vw, 320px);
			aspect-ratio: 1;
		}
		
		.what-we-do-point .point-visual img {
			width: 100%;
			height: 100%;
			object-fit: contain;
			display: block;
			filter: brightness(1.05);
		}
		
		.what-we-do-point .point-text {
			flex: 1;
			min-width: 0;
		}
		
		.what-we-do-point h3 {
			font-size: clamp(1.75rem, 3vw, 2.5rem);
			font-weight: 700;
			color: #ffffff;
			margin: 0 0 1rem;
			letter-spacing: -0.03em;
			line-height: 1.2;
		}
		
		.what-we-do-point p {
			font-size: clamp(1rem, 1.15vw, 1.15rem);
			line-height: 1.65;
			color: rgba(255, 255, 255, 0.85);
			margin: 0;
			font-weight: 400;
			max-width: 60ch;
		}
		
		@media (width < 768px) {
			.what-we-do-connector {
				display: none;
			}
			.what-we-do-point.point-image-left,
			.what-we-do-point.point-image-right {
				flex-direction: column;
				/* text-align: center; */
			}
			.what-we-do-point .point-visual {
				flex: 0 0 min(260px, 70vw);
			}
			.what-we-do-point p {
				max-width: none;
			}
		}
		
		#product:not(.what-we-do-section) {
			display: grid;
			grid-template-columns: subgrid;
			gap: 4rem;
			color: #ffffff;

			> *:not(.icons) {
				grid-column: main;
			}
			
			> h2 {
				margin-bottom: 2rem;
				color: #ffffff;
			}
			
			.icons {
				grid-column: fullbleed;
				height: max(20em, 35vb);
				margin: 3rem 0;
				
				display: flex;
				flex-direction: row;
				gap: 0.75rem;
				align-items: center;
				justify-content: center;
				padding: 2rem 0;
				
				overflow-x: clip;
				
				.icon {
					flex: 0 0 clamp(3.5rem, 8vw, 5.5rem);
					aspect-ratio: 1;
					border-radius: 50%;
					
					background: rgba(255, 255, 255, 0.08);
			    border: 1px solid rgba(255, 255, 255, 0.12);
			    backdrop-filter: blur(10px);
					
					display: grid;
					place-content: center;
					transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
					
					span {
						font-size: 1.75em !important;
						color: #ffffff;
						opacity: 0.85;
						transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
					}
					
					&:hover {
						background: rgba(255, 255, 255, 0.14);
						border-color: rgba(255, 255, 255, 0.2);
						transform: translateY(-4px) scale(1.05);
						box-shadow: 0 8px 16px rgba(0, 0, 0, 0.25);
						
						span {
							opacity: 1;
							transform: scale(1.15) rotate(10deg);
						}
					}
				}
			}
		}
		
		#features {
			.feature {
				padding-bottom: 4rem;
				
				.content {
					opacity: 0.3;
					transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1);
				}
				
				&.active .content {
					opacity: 1;
				}
				
				h3 {
					font-weight: 400;
					font-size: clamp(1.5rem, 2.5vw, 2rem);
					line-height: 1.2;
					margin-block-end: 1.5rem;
					letter-spacing: -0.01em;
					color: #ffffff;
				}
				
				img {
					border-radius: 1.5em;
					box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
					transition: transform 0.3s ease, box-shadow 0.3s ease;
					
					&:hover {
						transform: translateY(-4px);
						box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
					}
				}
				
				p {
					font-weight: 350;
					font-size: clamp(1rem, 1.2vw, 1.125rem);
					line-height: 1.6;
					color: #e4e4e7;
					letter-spacing: 0.01em;
				}
			}
			
			
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			grid-auto-rows: auto;
			gap: 2rem;
			
		
			@media (width >= 930px) {
				position: relative;
				
				.feature:first-child .img-wrapper {
					position: absolute;
					right: 0;
					top: 0;
					bottom: 0;
					width: 50%;
					container-type: inline-size;
					z-index: 1;
					
					img {
						position: sticky;
						width: 100cqi;
						height: auto;
						top: calc((100svb - 100cqi) / 2);
						opacity: 1;
						transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1);
						object-fit: cover;
					}
				}
				
				.feature:not(:first-child) .img-wrapper {
					display: none;
				}
				
				.feature {
					padding-block: 15vb;
					grid-column: 1;
					
					display: grid;
					place-content: center;
					
					p {
						width: 60%;
						max-width: 60ch;
						text-wrap: pretty;
					}
				}
			}
		}
	}
	
	@layer developers {
		#developers {
			width: 100%;
			border-top: 1px solid rgba(255, 255, 255, 0.1);
			margin-top: 4rem;
			padding-top: 4rem;
			color: #ffffff;
		
			display: grid;
			grid-template-columns: subgrid;
			gap: 3rem;

			> *:not(.carousel) {
				grid-column: main;
			}
			
			> div:first-child {
				margin-bottom: 1rem;
			}
			
			> div:first-child h2 {
				color: #ffffff;
			}
			
			.intro {
				color: #e4e4e7;
				font-size: clamp(1rem, 1.3vw, 1.25rem);
				line-height: 1.6;
				font-weight: 350;
				padding: 1rem 0;
				letter-spacing: 0.01em;
				
				@media (width >= 930px) {
					width: calc(35vw - 1.5rem);
					margin-left: auto;
					max-width: 40ch;
				}
			}
			
			.carousel {
				grid-column: fullbleed;
				padding-inline: 3rem;
				width: 100%;
				
				overflow-x: scroll;
				
				display: flex;
				gap: 2rem;
				
				.developer {
					flex: 0 0 100%;
					overflow: clip;
					
					@media (width >= 930px) {
						flex-basis: 60vi;
					}
					
					figure {
						display: grid;
						place-items: center;
						> * {
					    grid-area: 1 / 1;
						}
						
						figcaption {
							color: white;
							font-size: 2em;
						}
					}
					
					img {
						border-radius: 2em;
					}
					
					h3 {
						font-weight: 400;
						font-size: clamp(1.5rem, 2vw, 1.75rem);
						line-height: 1.2;
						margin-block-end: 1rem;
						letter-spacing: -0.01em;
						color: #ffffff;
					}
					
					p {
						width: 45%;
						text-wrap: pretty;
						color: #e4e4e7;
						letter-spacing: 0.01em;
						font-weight: 350;
						font-size: clamp(0.95rem, 1.1vw, 1.05rem);
						line-height: 1.6;
					}
					
					a {
						display: flex;
						flex-direction: row;
						align-items: center;
						gap: 0.25em;
						
						color: #e4e4e7;
				    text-decoration: none;
						font-weight: 300;
						
						transition: gap 0.15s ease-in;
						
						&:hover,
						&:focus-visible {
							gap: 0.5em;
						}
						
						&::after {
							font-family: 'Material Symbols Outlined';
							font-weight: normal;
							font-style: normal;
							font-size: 24px;
							line-height: 1;
							letter-spacing: normal;
							text-transform: none;
							display: inline-block;
							white-space: nowrap;
							word-wrap: normal;
							direction: ltr;
							-webkit-font-feature-settings: 'liga';
							-webkit-font-smoothing: antialiased;
							
							content: "\f46a";
						}
					}
				}
			}
		}
	}
	
	@layer who {
		#who {
			display: flex;
			flex-direction: column;
    	align-items: center;
			text-align: center;
			color: #ffffff;
			
			@media (width >= 930px) {
				flex-direction: row;
				justify-content: space-around;
			}
			
			> div {
				height: 40vh;
				
				display: grid;
				place-content: center;
				gap: 1em;
			
				@media (width >= 930px) {
					height: 80vh;
				}
			}
			
			h3 {
				font-weight: 400;
				font-size: 1.75em;
		    line-height: 1.1;
				color: #ffffff;
				
				@media (width >= 930px) {
					font-size: 2.5em;
				}
				
				span {
					color: #e4e4e7;
				}
			}
			
			button {
				font-size: 1.15em;
				justify-self: center;
			}
		}
	}
	
	@layer beforeyougo {
		#beforeyougo {
			display: grid;
			grid-template-columns: subgrid;
			
			height: min-content;

			> * {
				grid-column: main;
			}
			
			.card {
				width: 100%;
				height: auto;
				aspect-ratio: 4/3;
				max-height: 80vh;
				
				display: grid;
				padding: 4em;
				gap: 1rem;
				
				align-content: center;	
			}	
			
			p {
				font-size: 2em;
				text-wrap: pretty;
				margin: 0;
				max-width: 20ch;
				
				@media (width > 930px) {
					font-size: 3em;
				}
			}
			
			.buttons {
				display: flex;
				flex-direction: column;
				gap: 0.25rem;
				font-size: 1.2em;
				align-items: start;
				
				@media (width > 930px) {
					flex-direction: row;
				}
			}
		}
	}
	
	@layer services-scroll {
		.services-scroll-container {
			position: relative;
			z-index: 10;
			pointer-events: none;
			
			display: flex;
			flex-direction: row;
			gap: 3rem;
			align-items: center;
			
			@media (width < 930px) {
				display: none;
			}
		}
		
		.services-column {
			width: 240px;
			height: 600px;
			overflow: hidden;
			position: relative;
			mask-image: linear-gradient(
				to bottom,
				transparent 0%,
				black 10%,
				black 90%,
				transparent 100%
			);
			-webkit-mask-image: linear-gradient(
				to bottom,
				transparent 0%,
				black 10%,
				black 90%,
				transparent 100%
			);
		}
		
		.services-track {
			display: flex;
			flex-direction: column;
			gap: 2.2rem;
			animation: scroll-continuous-up 25s linear infinite;
			will-change: transform;
		}
		
		.services-track-reverse {
			animation: scroll-continuous-down 27s linear infinite;
		}
		
		.services-item {
			display: flex;
			align-items: center;
			gap: 0.75rem;
			padding: 0.5rem 0.75rem;
			border-radius: 0.5rem;
			transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
			cursor: default;
			
			.material-symbols-outlined {
				font-size: 1.5rem;
				width: 1.5rem;
				height: 1.5rem;
				display: flex;
				align-items: center;
				justify-content: center;
				color: var(--theme-surface-on-surface-variant);
				opacity: 0.7;
				transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
				flex-shrink: 0;
			}
			
			.services-text {
				font-size: 0.95rem;
				font-weight: 450;
				color: var(--theme-surface-on-surface-variant);
				opacity: 0.85;
				letter-spacing: 0.01em;
				line-height: 1.4;
				transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
				font-family: "Google Sans Flex", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
			}
			
			&:hover {
				background: rgba(var(--palette-grey-1000-rgb), 0.03);
				transform: translateX(4px);
				
				.material-symbols-outlined {
					opacity: 1;
					color: var(--theme-surface-on-surface);
					transform: scale(1.1);
				}
				
				.services-text {
					opacity: 1;
					color: var(--theme-surface-on-surface);
					font-weight: 500;
				}
			}
		}
		
		/* Dark welcome section: light text and icons for services */
		#welcome .services-item .material-symbols-outlined {
			color: rgba(255, 255, 255, 0.75);
			font-size: 1.5rem !important;
		}
		#welcome .services-item .services-text {
			color: rgba(255, 255, 255, 0.85);
			font-size: 1.05rem;
			font-weight: 500;
		}
		#welcome .services-item:hover .material-symbols-outlined,
		#welcome .services-item:hover .services-text {
			color: #fff;
			opacity: 1;
		}
		#welcome .services-item:hover {
			background: rgba(255, 255, 255, 0.06);
		}
		
		@keyframes scroll-continuous-up {
			0% {
				transform: translateY(0);
			}
			100% {
				transform: translateY(-50%);
			}
		}
		
		@keyframes scroll-continuous-down {
			0% {
				transform: translateY(-50%);
			}
			100% {
				transform: translateY(0);
			}
		}
	}
}

@layer base {
	html {
		background: #000000;
		font-family: "Google Sans Flex", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
		font-weight: 400;
		
		font-size: 16px;
		
		color: var(--theme-surface-on-surface);
		scroll-behavior: smooth;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		text-rendering: optimizeLegibility;
	}
	
	body {
		overflow-x: hidden;
	}
	section {
		/* Make sections fullheight */
		min-height: 100dvh;
		padding: clamp(2rem, 6vw, 4rem) 0;
		background: #000000;
		
		&.center {
			/* Center their contents */
			place-content: safe center;
			justify-items: center;
			padding: 6rem 0;
		}
	}

		h2 {
			font-size: clamp(2rem, 4vw, 3rem);
			font-weight: 400;
			margin: 0;
			line-height: 1.1;
			letter-spacing: -0.02em;
			color: var(--theme-surface-on-surface);

			@media (width >= 930px) {
				
				max-width: 30ch;
			}
		}
	
	p {
		color: var(--theme-surface-on-surface-variant);
	}
	
	@scope (.dark) {
		p {
			color: var(--theme-surface-surface);
		}
	}
}

@layer reset {
	html, body {
		height: 100%;
	}
	body {
		background: #000000;
	}
	
	* {
		box-sizing: border-box;
	}
	
	img {
		max-width: 100%;
		
	}
	
	ul[class] {
		margin: 0;
		padding: 0;
		list-style: none;
	}
	
	input, textarea, select, button {
		font-family: inherit;
		font-size: inherit;
	}
	
	a:focus-visible,
	button:focus-visible {
		outline-offset: 0.2rem;
	}
	
	figure {
		margin: 0;
	}
}

@layer util {
	.sr-only {
		position: absolute;
		width: 1px;
		height: 1px;
		padding: 0;
		margin: -1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
		border-width: 0;
	}
	
	.not-sr-only {
		position: static;
		width: auto;
		height: auto;
		padding: 0;
		margin: 0;
		overflow: visible;
		clip: auto;
		white-space: normal;
	}
}

@layer tokens {
	@layer colors {
		:root {
			--palette-grey-900: #2F3034;
			--palette-grey-800: #45474D;
			--palette-grey-50: #E6EAF0;
			--palette-grey-0: #FFFFFF;
			--palette-grey-1000: #212226;
			--palette-grey-20: #EFF2F7;
			--palette-grey-1200: #121317;
			--palette-grey-1100: #18191D;
			--palette-grey-10: #F8F9FC;
			--palette-grey-100: #E1E6EC;
			--palette-grey-200: #CDD4DC;
			--palette-grey-300: #B2BBC5;
			--palette-grey-400: #B7BFD9;
			--palette-grey-600: #AAB1CC4D;
			--palette-grey-1000-12: #dedfe2;
			--palette-grey-50-20: #414347;
			--palette-grey-15: #F0F1F5;
			--palette-grey-0-rgb: 255, 255, 255;
			--palette-grey-50-rgb: 230, 234, 240;
			--palette-grey-400-rgb: 183, 191, 217;
			--palette-grey-600-rgb: 170, 177, 204;
			--palette-grey-1000-rgb: 33, 34, 38;
			--palette-grey-1200-rgb: 18, 19, 23;
			--theme-surface-surface: var(--palette-grey-0);
			--theme-surface-on-surface: var(--palette-grey-1200);
			--theme-surface-on-surface-variant: var(--palette-grey-800);
			--theme-surface-surface-container: var(--palette-grey-10);
			--theme-surface-surface-container-high: var(--palette-grey-20);
			--theme-surface-surface-container-higher: var(--palette-grey-50);
			--theme-surface-surface-container-highest: var(--palette-grey-100);
			--theme-surface-inverse-surface: var(--palette-grey-1200);
			--theme-surface-inverse-on-surface: var(--palette-grey-10);
			--theme-surface-inverse-on-surface-variant: var(--palette-grey-300);
			--theme-surface-overlay: rgba(var(--palette-grey-0-rgb), .95);
			--theme-surface-overlay-low: rgba(var(--palette-grey-0-rgb), .12);
			--theme-surface-overlay-high: rgba(var(--palette-grey-0-rgb), .24);
			--theme-surface-overlay-higher: rgba(var(--palette-grey-0-rgb), .72);
			--theme-surface-overlay-highest: rgba(var(--palette-grey-0-rgb), .95);
			--theme-surface-transparent: rgba(var(--palette-grey-0-rgb), 0);
			--theme-inverse-surface-overlay: rgba(var(--palette-grey-1200-rgb), .01);
			--theme-inverse-surface-overlay-high: rgba(var(--palette-grey-1200-rgb), .24);
			--theme-inverse-surface-overlay-higher: rgba(var(--palette-grey-1200-rgb), .72);
			--theme-inverse-surface-overlay-highest: rgba(var(--palette-grey-1200-rgb), .95);
			--theme-inverse-surface: var(--palette-grey-1200);
			--theme-outline: rgba(var(--palette-grey-1000-rgb), .12);
			--theme-outline-variant: rgba(var(--palette-grey-1000-rgb), .06);
			--theme-inverse-outline: rgba(var(--palette-grey-50-rgb), .12);
			--theme-inverse-outline-variant: rgba(var(--palette-grey-50-rgb), .06);
			--theme-outline-inverse-outline-variant: rgba(230, 234, 240, .06);
			--theme-outline-outline-variant: rgba(33, 34, 38, .06);
			--theme-primary-primary: var(--theme-surface-on-surface);
			--theme-primary-on-primary: var(--theme-surface-surface);
			--theme-tonal-tonal: var(--theme-surface-surface-container);
			--theme-tonal-on-tonal: var(--theme-surface-on-surface);
			--theme-outlined-outlined: var(--theme-surface-surface-transparent);
			--theme-outlined-on-outlined: var(--theme-surface-on-surface);
			--theme-protected-protected: var(--theme-surface-surface-container);
			--theme-protected-on-protected: var(--theme-surface-on-surface);
			--theme-text-text: var(--theme-surface-surface-transparent);
			--theme-text-on-text: var(--theme-surface-on-surface);
			--theme-text-link-states-enabled: var(--theme-surface-on-surface-variant);
			--theme-text-link-states-hovered: var(--palette-grey-1000);
			--theme-text-link-states-focused: var(--palette-grey-1100);
			--theme-text-link-states-pressed: var(--palette-grey-1000);
			--theme-text-link-states-disabled: #6A6A71;
			--theme-button-states-primary-enabled: var(--theme-primary-primary);
			--theme-button-states-primary-disabled: var(--palette-grey-10);
			--theme-button-states-primary-hovered: var(--palette-grey-900);
			--theme-button-states-primary-pressed: rgba(var(--palette-grey-50-rgb), .12);
			--theme-button-states-primary-focused: rgba(var(--palette-grey-50-rgb), .2);
			--theme-button-states-primary-on-disabled: rgba(var(--palette-grey-1000-rgb), .2);
			--theme-secondary-button: rgba(var(--palette-grey-400-rgb), .1);
			--theme-button-secondary-hover: var(--palette-grey-15);
			--theme-button-secondary-inverse-hover: rgba(var(--palette-grey-600-rgb), .3);
			--theme-button-states-tonal-enabled: var(--theme-tonal-tonal);
			--theme-button-states-tonal-disabled: var(--palette-grey-10);
			--theme-button-states-protected-enabled: var(--theme-protected-protected);
			--theme-button-states-protected-hovered: var(--palette-grey-20);
			--theme-button-states-protected-disabled: var(--palette-grey-100);
			--theme-button-states-outlined-enabled: var(--theme-outlined-outlined);
			--theme-button-states-disabled: var(--palette-grey-100);
			--theme-button-states-on-disabled: #6A6A71;
			--theme-button-states-hovered: rgba(var(--palette-grey-1000-rgb), .04);
			--theme-button-states-pressed: rgba(var(--palette-grey-1000-rgb), .06);
			--theme-button-states-focused: rgba(var(--palette-grey-1000-rgb), .12);
			--theme-button-states-disabled-transparent: rgba(var(--palette-grey-50-rgb), 0);
			--theme-nav-button: rgba(var(--palette-grey-400-rgb), .09);
			--theme-nav-button-hover: rgba(var(--palette-grey-400-rgb), .2);
			--divider: var(--theme-outline-outline-variant);
		}
	}
		
	@layer animations {
		:root {
			--ease-in-quad: cubic-bezier(.55, .085, .68, .53);
			--ease-in-cubic: cubic-bezier(.55, .055, .675, .19);
			--ease-in-quart: cubic-bezier(.895, .03, .685, .22);
			--ease-in-quint: cubic-bezier(.755, .05, .855, .06);
			--ease-in-expo: cubic-bezier(.95, .05, .795, .035);
			--ease-in-circ: cubic-bezier(.6, .04, .98, .335);
			--ease-out-quad: cubic-bezier(.25, .46, .45, .94);
			--ease-out-cubic: cubic-bezier(.215, .61, .355, 1);
			--ease-out-quart: cubic-bezier(.165, .84, .44, 1);
			--ease-out-quint: cubic-bezier(.23, 1, .32, 1);
			--ease-out-expo: cubic-bezier(.19, 1, .22, 1);
			--ease-out-circ: cubic-bezier(.075, .82, .165, 1);
			--ease-in-out-quad: cubic-bezier(.455, .03, .515, .955);
			--ease-in-out-cubic: cubic-bezier(.645, .045, .355, 1);
			--ease-in-out-quart: cubic-bezier(.77, 0, .175, 1);
			--ease-in-out-quint: cubic-bezier(.86, 0, .07, 1);
			--ease-in-out-expo: cubic-bezier(1, 0, 0, 1);
			--ease-in-out-circ: cubic-bezier(.785, .135, .15, .86);
			--ease-out-back: cubic-bezier(.34, 1.85, .64, 1);
		}
	}
}

/* Contact section – above footer */
.contact-section {
	position: relative;
	padding: clamp(6rem, 14vh, 9rem) clamp(1.5rem, 5vw, 3rem) clamp(2.5rem, 6vh, 4rem);
	background: #ebe6df;
}
.contact-card {
	position: relative;
	max-width: 70rem;
	margin: 0 auto;
	background: #ffffff;
	border-radius: 24px;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08), 0 4px 20px rgba(0, 0, 0, 0.04);
	padding: clamp(2rem, 4vw, 5.75rem);
	padding-left: 6rem;
	padding-right: 6rem;
	text-align: left;
}
.contact-header {
	display: grid;
	grid-template-rows: auto auto;
	grid-template-columns: 1fr;
	margin: 0 0 1.5rem 0;
	padding: 0;
	text-align: left;
	width: 100%;
	gap: 0 !important;
}
.contact-heading-small {
	font-size: clamp(0.95rem, 1.2vw, 1.1rem);
	font-weight: 400;
	color: #1a1a1a;
	margin: 0 0 0.2rem 0;
	padding: 0;
	text-align: left;
	display: block;
	grid-row: 1;
}
.contact-heading-main {
	font-size: clamp(1.75rem, 3vw, 2.25rem);
	font-weight: 700;
	color: #1a1a1a;
	margin: 0;
	padding: 0;
	letter-spacing: -0.02em;
	line-height: 1.2;
	text-align: left;
	display: block;
	grid-row: 2;
}
.contact-form {
	margin: 0;
	padding: 0;
}
.contact-form-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(1.5rem, 4vw, 2.5rem);
	align-items: start;
	margin: 0;
	padding: 0;
}
.contact-form-left,
.contact-form-right {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	min-width: 0;
	margin: 0;
	padding: 0;
}
.contact-form label {
	font-size: 1rem;
	font-weight: 600;
	color: #333;
	display: block;
	margin: 0.5rem 0 0 0;
	padding: 0;
}
.contact-form-left label:first-child {
	margin-top: 0;
}
.contact-form input,
.contact-form textarea {
	width: 100%;
	padding: 0.65rem 1rem;
	font-size: 1rem;
	font-family: inherit;
	color: #1a1a1a;
	background: #ebf1f2;
	border: none;
	border-radius: 5px;
	box-sizing: border-box;
	transition: background 0.2s ease;
}
.contact-form input::placeholder,
.contact-form textarea::placeholder {
	color: #888;
}
.contact-form input:focus,
.contact-form textarea:focus {
	outline: none;
	background: #e0e8ea;
}
.contact-form textarea {
	resize: vertical;
	min-height: 110px;
}
.contact-email-alt {
	font-size: 0.85rem;
	color: #555;
	margin: 0.5rem 0 0;
}
.contact-email-alt a {
	color: inherit;
	text-decoration: none;
}
.contact-email-alt a:hover {
	text-decoration: underline;
}
.contact-form-actions {
	margin-top: 1.25rem;
	display: flex;
	justify-content: flex-end;
}
.contact-submit {
	padding: 0.85rem 2rem;
	font-size: 1rem;
	font-weight: 700;
	font-family: inherit;
	color: #ffffff;
	background: #1a1a1a;
	border: none;
	border-radius: 12px;
	cursor: pointer;
	transition: background 0.2s ease, transform 0.1s ease;
}
.contact-submit:hover {
	background: #333;
}
.contact-submit:active {
	transform: scale(0.98);
}
@media (max-width: 800px) {
	.contact-section {
		padding-left: 2.5rem;
		padding-right: 2.5rem;
	}
	.contact-card {
		padding-left: 3rem;
		padding-right: 3rem;
	}
	.contact-form-grid {
		grid-template-columns: 1fr;
	}
}

@layer footer {
	#footer {
		padding: 8rem 2rem 1.5rem;
		background: #000000;
		color: #ffffff;
		min-height: 100vh;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
	
	.footer-top {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: auto;
		padding: 0 2rem;
		position: relative;
		min-height: 4rem;
	}
	
	.footer-left {
		flex: 0 0 auto;
		min-height: 4rem;
		display: flex;
		align-items: center;
		height: 100%;
	}
	
	.footer-left p {
		font-size: clamp(1.5rem, 3vw, 2.5rem);
		font-weight: 400;
		color: #ffffff;
		margin: 0;
		letter-spacing: -0.01em;
		line-height: 1.4;
		min-height: 1.4em;
		display: flex;
		align-items: center;
		height: 100%;
	}
	
	.footer-typewriter-text {
		display: inline-block;
		min-width: 1ch;
		min-height: 1.4em;
		position: relative;
		vertical-align: baseline;
		white-space: nowrap;
	}
	
	.footer-typewriter-text::after {
		content: "|";
		color: #ffffff;
		animation: blink 0.8s step-end infinite;
		margin-left: 2px;
		font-weight: 400;
		display: inline-block;
		opacity: 0.7;
	}
	
	.footer-right {
		position: absolute;
		left: 85%;
		top: 1.2rem;
		display: flex;
		flex-direction: row;
		gap: 8rem;
		align-items: flex-start;
		height: auto;
	}
	
	.footer-column {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
	}
	
	.footer-column dt {
		font-size: 1rem;
		font-weight: 700;
		color: #ffffff;
		margin-bottom: 1rem;
		margin-top: 0;
	}
	
	.footer-column dd {
		margin: 0;
	}
	
	.footer-right ul {
		list-style: none;
		padding: 0;
		margin: 0;
		display: flex;
		flex-direction: column;
		gap: 0.5rem;
	}
	
	.footer-right a {
		color: #ffffff;
		text-decoration: none;
		font-size: 1rem;
		transition: color 0.2s ease;
		opacity: 0.8;
	}
	
	.footer-right a:hover {
		color: #ffffff;
		opacity: 1;
	}
	
	.footer-brand {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		flex: 1;
		min-height: 40vh;
		gap: 1.5rem;
	}
	
	.footer-title {
		font-size: clamp(30rem, 8vw, 6rem);
		font-weight: 600;
		letter-spacing: -0.02em;
		color: var(--theme-surface-on-surface);
		margin: 0;
		opacity: 0;
		transform: translateY(30px);
		transition: opacity 1s cubic-bezier(0.4, 0, 0.2, 1), transform 1s cubic-bezier(0.4, 0, 0.2, 1);
	}
	
	.footer-title.visible {
		opacity: 1;
		transform: translateY(0);
	}

	@media (max-width: 600px) {
		.footer-title {
			font-size: 6.5rem;
		}
	}

	.footer-social {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 0.9rem;
		
	}

	.footer-social a {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 2.25rem;
		height: 2.25rem;
		color: #ffffff;
		opacity: 0.85;
		transition: opacity 0.2s ease, color 0.2s ease, transform 0.2s ease;
		border: none;
		outline: none;
	}
	.footer-social a::after {
		display: none;
		content: none;
	}

	.footer-social a:hover,
	.footer-social a:focus,
	.footer-social a:focus-visible {
		opacity: 1;
		color: #87bd3f;
		transform: translateY(-2px);
		border: none;
		outline: none;
	}

	.footer-social svg {
		width: 100%;
		height: 100%;
	}

	.footer-columns {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: clamp(3rem, 7vw, 5.5rem);
		max-width: 120rem;
		margin: 0 auto;
		padding: 0rem clamp(2rem, 6vw, 4rem) 3rem;
		width: 100%;
		/* border-top: 1px solid rgba(255, 255, 255, 0.12); */
	}

	.footer-col-title {
		font-size: 1rem;
		font-weight: 700;
		color: #ffffff;
		margin: 0 0 1rem;
	}

	.footer-col-list {
		list-style: none;
		padding: 0;
		margin: 0;
		display: flex;
		flex-direction: column;
		gap: 0.85rem;
	}

	.footer-col-list a,
	.footer-col-list span,
	.footer-col-list li {
		color: rgba(255, 255, 255, 0.85);
		font-size: 0.9rem;
		line-height: 1.5;
		text-decoration: none;
		transition: color 0.2s ease, opacity 0.2s ease;
		align-items: center;
	}

	.footer-col-list a:hover {
		color: #ffffff;
		opacity: 1;
	}

	.footer-col-list-arrows li a {
		display: inline-flex;
		align-items: center;
		gap: 0.4rem;
	}

	.footer-col-list-arrows li a::before {
		content: '';
		display: inline-block;
		width: 0.35em;
		height: 0.35em;
		border-right: 2px solid #87bd3f;
		border-top: 2px solid #87bd3f;
		transform: rotate(45deg);
		flex-shrink: 0;
	}

	.footer-contact-item {
		display: flex;
		align-items: flex-start;
		gap: 0.5rem;
	}

	.footer-contact-item .footer-contact-label {
		display: none;
	}

	.footer-contact-item span,
	.footer-contact-item a {
		color: rgba(255, 255, 255, 0.85);
		font-size: 0.9rem;
	}

	.footer-contact-address::before {
		content: '';
		display: inline-block;
		width: 1em;
		height: 1em;
		margin-right: 0.25rem;
		flex-shrink: 0;
		background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2387bd3f'%3E%3Cpath d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z'/%3E%3C/svg%3E") no-repeat center / contain;
	}

	.footer-contact-phone::before {
		content: '';
		display: inline-block;
		width: 1em;
		height: 1em;
		margin-right: 0.25rem;
		flex-shrink: 0;
		background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='rgba(255,255,255,0.7)'%3E%3Cpath d='M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z'/%3E%3C/svg%3E") no-repeat center / contain;
	}

	.footer-contact-email::before {
		content: '';
		display: inline-block;
		width: 1em;
		height: 1em;
		margin-right: 0.25rem;
		flex-shrink: 0;
		background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2387bd3f'%3E%3Cpath d='M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z'/%3E%3C/svg%3E") no-repeat center / contain;
	}

	@media (width < 900px) {
		.footer-columns {
			grid-template-columns: 1fr 1fr;
			padding: 2rem 1.5rem 1.5rem;
			gap: 2rem;
		}
	}

	@media (width < 480px) {
		.footer-columns {
			grid-template-columns: 1fr;
		}
	}
	
	.footer-bottom {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: auto;
		padding-top: 2rem;
	}
	
	.footer-bottom-left p {
		font-size: 0.875rem;
		color: #ffffff;
		margin: 0;
		opacity: 0.8;
	}
	
	.footer-bottom-right ul {
		list-style: none;
		padding: 0;
		margin: 0;
		display: flex;
		gap: 1.5rem;
	}
	
	.footer-bottom-right a {
		color: #ffffff;
		text-decoration: none;
		font-size: 0.875rem;
		transition: opacity 0.2s ease;
		opacity: 0.8;
	}
	
	.footer-bottom-right a:hover {
		color: #ffffff;
		opacity: 1;
	}
	
	/* Stack footer-right below footer-left on smaller screens (same breakpoint as header mobile menu) */
	@media (width < 930px) {
		.footer-top {
			display: flex;
			flex-direction: column;
			align-items: center;
			gap: 1.25rem;
			min-height: auto;
		}
		
		.footer-left,
		.footer-right {
			justify-self: center;
		}
		
		.footer-right {
			position: static;
			left: auto;
			top: auto;
			flex-direction: row;
			gap: 0.9rem;
		}
	}
	
	@media (width < 768px) {
		#footer {
			padding: 4rem 1.5rem 1rem;
		}
		
		.footer-social {
			display: flex;
			flex-wrap: wrap;
			gap: 0.6rem;
		}
		
		.footer-social a {
			width: 2rem;
			height: 2rem;
		}
		
		.footer-bottom {
			flex-direction: column;
			gap: 1rem;
			align-items: flex-start;
		}
		
		.footer-bottom-right ul {
			flex-direction: column;
			gap: 0.75rem;
		}
	}
}

@layer pages {
	.legal-page {
		display: block;
		max-width: 70rem;
		margin: 0;
		padding: 12rem clamp(5rem, 1vw, 1rem) 0rem;
		color: #ffffff;
	}

	.legal-page-open-letter {
		color: #111111;
		padding-bottom: 6rem;
		background: #ffffff;
		min-height: 60vh;
	}

	/* Open letter page: full white content area, black header, black footer */
	html.page-open-letter,
	body.page-open-letter {
		background: #ffffff;
	}
	body.page-open-letter .header-wrapper {
		background: #000000;
	}
	body.page-open-letter #footer {
		background: #000000;
		margin-top: 4rem;
	}

	/* Override global full-height sections inside legal pages */
	.legal-page section {
		min-height: auto;
		padding: 0;
		background: transparent;
	}

	.legal-hero-title-wrap {
		display: inline-block;
	}

	.legal-hero h1 {
		font-size: clamp(2.4rem, 4vw, 3rem);
		font-weight: 700;
		margin: 0;
	}

	.legal-hero-line {
		display: block;
		height: 8px;
		width: 100%;
		margin-top: 0.5rem;
		background: linear-gradient(90deg, #f9cbef, #f482f1 21%, #f385cd 45.23%, #dfbf74 81.93%, #9bf2ad);
		border-radius: 1px;
	}

	.legal-meta {
		margin-top: 0.5rem;
		font-size: 0.9rem;
		opacity: 0.75;
	}

	.legal-section {
		margin-top: 4rem;
	}

	.legal-section h2 {
		font-size: 1.35rem;
		margin: 0 0 0.45rem;
		color: #ffffff;
	}

	.legal-section h3 {
		font-size: 1.02rem;
		margin: 1rem 0 0.35rem;
		color: #ffffff;
	}

	.legal-section p {
		margin: 0.5rem 0;
		line-height: 1.7;
		color: rgba(255, 255, 255, 0.8);
	}

	.legal-section ul {
		margin: 0.25rem 0 0.35rem 1.25rem;
		padding: 0;
		list-style: disc;
	}

	.legal-section li {
		margin: 0.75rem 0;
		line-height: 2;
		color: rgba(255, 255, 255, 0.8);
	}

	/* Open letter overrides: dark text on white background */
	.legal-page-open-letter .legal-hero h1,
	.legal-page-open-letter .legal-section h2,
	.legal-page-open-letter .legal-section h3 {
		color: #000000;
	}

	.legal-page-open-letter .legal-section p,
	.legal-page-open-letter .legal-section li {
		color: #222222;
	}

	.legal-page-open-letter .legal-signature {
		color: #000000;
	}

	.legal-section a {
		color: #87bd3f;
		text-decoration: none;
	}

	.legal-section a:hover {
		text-decoration: underline;
	}

	.legal-section-letter p {
		margin: 0.75rem 0;
	}

	.legal-signature {
		margin-top: 2rem;
		font-style: italic;
		opacity: 0.9;
	}

	@media (width < 768px) {
		.legal-page {
			padding-top: 4.5rem;
		}
	}
}