/*
	REFACTOR TASK INSTRUCTIONS (CSS)
	Goal:
	- Simplify and reorganize styles, keep current look/behavior.
	- Preserve selectors used by JS.
	- Maintain parity across breakpoints.
	Notes: Malformed comment & stray rules fixed during desktop layout tweak pass.
*/


/* =======================================================================
   DESIGN SYSTEM TOKENS
   -----------------------------------------------------------------------
   Centralized custom properties for typography, spacing, color, motion.
   Add or adjust here—component rules below should reference tokens so
   visual changes remain isolated.
   ======================================================================= */

/* FONT LOADING
	-------------------------------------------------------------------
	Self-hosted Graphik family. Graphik now serves as primary sans throughout.
	Urbanist removed. Weight mapping approximated:
	Thin(100/200), Extralight(200), Light(300), Regular(400), Medium(500),
	Semibold(600), Bold(700), Black(800), Super(900). Italics included.
*/
@font-face { font-family:'Graphik'; src:url('./fonts/graphikfontfiles/Graphik-Thin.otf') format('opentype'); font-weight:100; font-style:normal; font-display:swap; }
@font-face { font-family:'Graphik'; src:url('./fonts/graphikfontfiles/Graphik-ThinItalic.otf') format('opentype'); font-weight:100; font-style:italic; font-display:swap; }
@font-face { font-family:'Graphik'; src:url('./fonts/graphikfontfiles/Graphik-Extralight.otf') format('opentype'); font-weight:200; font-style:normal; font-display:swap; }
@font-face { font-family:'Graphik'; src:url('./fonts/graphikfontfiles/Graphik-ExtralightItalic.otf') format('opentype'); font-weight:200; font-style:italic; font-display:swap; }
@font-face { font-family:'Graphik'; src:url('./fonts/graphikfontfiles/Graphik-Light.otf') format('opentype'); font-weight:300; font-style:normal; font-display:swap; }
@font-face { font-family:'Graphik'; src:url('./fonts/graphikfontfiles/Graphik-LightItalic.otf') format('opentype'); font-weight:300; font-style:italic; font-display:swap; }
@font-face { font-family:'Graphik'; src:url('./fonts/graphikfontfiles/Graphik-Regular.otf') format('opentype'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Graphik'; src:url('./fonts/graphikfontfiles/Graphik-RegularItalic.otf') format('opentype'); font-weight:400; font-style:italic; font-display:swap; }
@font-face { font-family:'Graphik'; src:url('./fonts/graphikfontfiles/Graphik-Medium.otf') format('opentype'); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:'Graphik'; src:url('./fonts/graphikfontfiles/Graphik-MediumItalic.otf') format('opentype'); font-weight:500; font-style:italic; font-display:swap; }
@font-face { font-family:'Graphik'; src:url('./fonts/graphikfontfiles/Graphik-Semibold.otf') format('opentype'); font-weight:600; font-style:normal; font-display:swap; }
@font-face { font-family:'Graphik'; src:url('./fonts/graphikfontfiles/Graphik-SemiboldItalic.otf') format('opentype'); font-weight:600; font-style:italic; font-display:swap; }
@font-face { font-family:'Graphik'; src:url('./fonts/graphikfontfiles/Graphik-Bold.otf') format('opentype'); font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:'Graphik'; src:url('./fonts/graphikfontfiles/Graphik-BoldItalic.otf') format('opentype'); font-weight:700; font-style:italic; font-display:swap; }
@font-face { font-family:'Graphik'; src:url('./fonts/graphikfontfiles/Graphik-Black.otf') format('opentype'); font-weight:800; font-style:normal; font-display:swap; }
@font-face { font-family:'Graphik'; src:url('./fonts/graphikfontfiles/Graphik-BlackItalic.otf') format('opentype'); font-weight:800; font-style:italic; font-display:swap; }
@font-face { font-family:'Graphik'; src:url('./fonts/graphikfontfiles/Graphik-Super.otf') format('opentype'); font-weight:900; font-style:normal; font-display:swap; }
@font-face { font-family:'Graphik'; src:url('./fonts/graphikfontfiles/Graphik-SuperItalic.otf') format('opentype'); font-weight:900; font-style:italic; font-display:swap; }

:root {
	/* Font families */
	--font-sans-base: 'Graphik', 'Helvetica Neue', Arial, system-ui, sans-serif;
	--font-display: 'Graphik', 'Helvetica Neue', Arial, system-ui, sans-serif;
	--font-tagline-base: 'Graphik', 'Helvetica Neue', Arial, system-ui, sans-serif;
	--font-tagline: var(--font-tagline-base);

	/* Font weights */
	--weight-thin: 200;
	--weight-light: 300;
	--tagline-weight: 400; /* Normal weight */
	--weight-regular: 400;
	--weight-medium: 500;
	--weight-semibold: 600;

	/* Sizing */
	--logo-height: 84px; /* increased from 72px for greater brand presence */
	--nav-links-shift: calc(var(--logo-height) * -0.29); /* shift links up so their baseline aligns ~25% from logo top */
	
	/* Panel positioning calculations */
	--logo-width: 80px; /* reduced estimate - closer to actual logo width */
	--panel-side-offset: calc(var(--nav-padding-left) + var(--logo-width) + var(--nav-padding-left)); /* nav padding + logo width + desired gap */
	--panel-gap: calc(var(--nav-padding-left) / 2); /* half of logo padding between panels */
	--fs-nav: 1.1rem; /* increased from 0.83rem for better readability */
	--fs-tagline-xs: 0.95rem;
	--fs-tagline-sm: 1.15rem;
	--fs-tagline-md: 1.55rem;
	--fs-tagline-lg: 2.05rem;
	--fs-tagline-xl: 2.70rem; /* bumped */
	--fs-tagline-2xl: 3.25rem; /* bumped */
	--fs-tagline-3xl: 3.55rem; /* bumped */
	--fs-tagline-fluid: clamp(var(--fs-tagline-xs), calc(0.85rem + 1.8vw), var(--fs-tagline-xl));

	/* Line heights */
	--lh-tight: 1.1;
	--lh-snug: 1.15;
	--lh-normal: 1.3;

	/* Spacing */
	--nav-space: clamp(22px, 3.2vw, 44px);
	--nav-links-gap: clamp(30px, 4vw, 70px); /* increased spacing between nav items */
	--nav-gap: 5px;
	/* Doubled nav padding */
	--nav-padding-top: 20px;
	--nav-padding-right: 48px;
	--nav-padding-bottom: 0px;
	--nav-padding-left: 20px;

	/* Colors */
	--color-bg: #000;
	--color-fg: #fff;
	--color-accent: #ffd54a;
	--color-accent-soft: #ffe07d;

	/* Motion */
	--ui-speed-fast: .18s;
	--ui-speed: .28s;
	--ui-ease: cubic-bezier(.4,.14,.2,1);

	/* Shadows */
	--shadow-text-nav: 0 1px 9px rgba(0,0,0,.24);

	/* Focus */
	--ui-focus: var(--color-accent);
		--nav-links-gap: clamp(30px, 4vw, 70px); /* increased spacing between nav items */
	/* Tagline gradient stops */
	--tagline-grad-start: #ffffff;
	--tagline-grad-mid: #ececec;
	--tagline-grad-end: #ffffff;

	/* Scene panel typography */
	--sc-panel-font-size: clamp(1.05rem, 0.95rem + .5vw, 1.35rem); /* increased from 0.83-1.08rem */
	--sc-panel-font-size-mobile: clamp(1.15rem, 1.0rem + 1.0vw, 1.45rem); /* increased from 1.0-1.25rem for better mobile readability */
	--sc-panel-body-size: .62em; /* decreased further for much smaller body text */
}

html { overflow:hidden; }
/* Force Graphik font throughout the site */
* {
	font-family: var(--font-sans-base) !important;
}

body {
	margin: 0;
	background-color: var(--color-bg);
	color: var(--color-fg);
	font-family: var(--font-sans-base) !important;
	font-size: 16px;
	line-height: .1; /* restored to original to preserve top bar layout */
	overscroll-behavior: none;
	overflow:hidden;
}

a {
	color: #fff;
	text-decoration: none;
}

a:hover {
	text-decoration: none;
}

button {
	cursor: pointer;
	text-transform: uppercase;
}
#about {
    display: none;
 	background-color: rgba(0,0,0,.8);
    width: 100%;
    height: auto;
    bottom: 0px;
    top: 0px;
    left: 0;
    position: absolute;
}

.about-title {
	font-size: 45px;
}

.about-text {
	font-size: 15px;
}

.centered {
  position: relative; /* or absolute */
  top: 50%;
  left: 50%;
  /* bring your own prefixes */
  transform: translate(-50%, -50%);
  min-width: 300px;
}


/*the fade animations*/

@keyframes fade-out {
  from {
    display: block;
    opacity: 100%;
  }
  to {
    opacity: 0%;
    display: none;
  }
}

@keyframes fade-in {
  from {
    display: block;
    opacity: 0%;
  }
  to {
    display: block;
    opacity: 100%;
  }
}

#info {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%; /* allow inner elements to center relative to viewport */
	padding: 2px 0 0; /* tighter to top */
	font-size: 53px;
	box-sizing: border-box;
	text-align: center;
	-moz-user-select: auto;
	-webkit-user-select: auto;
	-ms-user-select: auto;
	user-select: auto;
	pointer-events: auto;
	z-index: 5; /* above canvas */
}

/* =======================================================================
	 SCENE PANELS (Desktop baseline)
	 Half-viewport black (75% opacity) framing boxes. Left/right differ
	 only by anchoring. Inner box height auto-expands to fit content.
	 Mobile overrides deferred (retain previous media queries later).
	 ======================================================================= */
.scene-panel {
	position:absolute;
	top:50vh; /* baseline vertical anchor (JS anim adjusts translateY) */
	width:calc(50vw - var(--panel-side-offset) - var(--panel-gap)); /* half screen minus offsets and gap */
	max-width:none;
	margin:0;
	padding:clamp(45px,4.2vw,75px); /* increased internal padding */
	box-sizing:border-box;
	background:rgba(0,0,0,.75);
	color:var(--color-fg);
	font-family:var(--font-sans-base) !important;
	font-size:var(--sc-panel-font-size);
	line-height:1.38;
	text-align:left;
	opacity:0;
	transform:translateY(0);
	will-change:transform,opacity;
	pointer-events:none;
}
.scene-panel.is-visible { opacity:1; pointer-events:auto; }
/* Left vs Right placement - Updated with calculated offsets for logo + padding */
/* Reusable center option: same width as base, no special transform here (JS composes X+Y) */
.scene-panel.panel-center { left:50%; right:auto; }
.scene-panel.panel-right { right:var(--panel-side-offset); left:auto; }

#nyc2-copy.scene-panel { left:var(--panel-side-offset); right:auto; }  /* Panel 2 - LEFT side */
/* Panel 3 uses .panel-center class */
/* Panel 4 uses .panel-right class */
/* Inner wrapper now purely structural */
.scene-panel-inner { margin:0; padding:0; background:transparent; }
/* Unified heading + subheading */
/* Panel headings */
.scene-panel h2.sc2-h,
.scene-panel .sc2-h { 
	font-size: clamp(1.4rem, 1.2rem + 0.8vw, 1.8rem);
	font-weight: 600;
	line-height: 1.1;
	letter-spacing: .08em;
	text-transform: uppercase;
	margin: 0 0 1.2rem;
	color: #ffd54a;
	font-family: var(--font-sans-base);
}

.scene-panel .sc3-sub { 
	font: 600 1.0rem/1.1 var(--font-sans-base); 
	letter-spacing: .17em; 
	text-transform: uppercase; 
	margin: 0 0 1.05rem; 
	color: #ffd54a; 
}

/* Backers section at position 135 */
.backers-section-standalone {
	position: absolute; /* JS sets top; centered horizontally via CSS */
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: auto;
	z-index: 10;
	opacity: 0;
	transition: opacity .55s ease;
	transform-origin: center bottom;
	pointer-events: none;
	filter: drop-shadow(0 6px 20px rgba(0, 0, 0, 0.4)) drop-shadow(0 3px 10px rgba(0, 0, 0, 0.6));
}

.backers-section-standalone.is-visible { opacity:1; pointer-events:auto; }

.backers-container-standalone { 
	text-align: center;
	font-family: var(--font-sans-base);
	line-height: 1;
	white-space: nowrap;
	display: flex;
	align-items: center;
	justify-content: center; /* center row content */
	width: 100%;
	gap: 1.5rem;
}

.backers-label {
	color: #ffd54a;
	/* Match panel title size */
	font-size: clamp(1.4rem, 1.2rem + 0.8vw, 1.8rem);
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	flex-shrink: 0;
}

.backers-names {
	color: #ffffff;
	font-size: clamp(1.4rem, 1.2rem + 0.8vw, 1.8rem);
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	display: flex;
	align-items: center;
	justify-content: space-between; /* Changed from center to space-between for even distribution */
	flex: 1;
}

/* Base logo visuals */
.backer-logo { filter: brightness(1.1); transition: filter 0.3s ease; flex-shrink: 11; }

/* Equalize logo height in the backers section; allow width to vary */
.backers-section-standalone .backer-logo { height: 3.2rem; width: auto !important; }

/* Remove height-based per-logo adjustments in favor of equal widths */

.backer-logo:hover {
	filter: brightness(1.3);
}

/* Mobile backers section - vertical layout */
@media (max-width: 640px) {
	.backers-container-standalone {
		flex-direction: column;
		gap: 1rem;
		white-space: normal;
	}
	
	.backers-names {
		flex-direction: column;
		gap: 1.5rem;
	}
	
	/* Stack logos vertically and equalize heights on mobile */
	.backers-section-standalone .backer-logo { height: clamp(5rem, 2.2rem + 1.2vw, 3.6rem); width: auto !important; }
}

/* Contact section at the bottom - after backers */
.contact-section-standalone {
	position: absolute;
	top: 90vh;
	left: 50%;
	transform: translateX(-50%);
	width: 80%;
	z-index: 10;
	opacity: 0;
	transform-origin: center bottom;
	transition: opacity .55s ease, transform .55s ease;
	pointer-events: none;
	text-align: center;
}

.contact-section-standalone.is-visible { opacity:1; transform:translateX(-50%) translateY(-12px); pointer-events:auto; }

.contact-container {
	padding: 4rem 0;
}

/* Contact CTA: style like tagline with a box behind */
.contact-link {
	position: relative;
	display: flex; /* flex centers content vertically */
	align-items: center;
	justify-content: center;
	font-family: var(--font-sans-base);
	font-size: clamp(1.8rem, 1.6rem + 1.2vw, 3rem);
	font-weight: 800;
	letter-spacing: .08em;
	text-transform: uppercase;
	text-decoration: none;
	line-height: 1; /* prevent extra vertical space */
	padding: 1.15rem 1.8rem; /* balanced vertical padding */
	/* Keep width exactly equal to the inner text column: include padding inside width */
	box-sizing: border-box;
	border: 0; /* visual stroke provided by box-shadow below */
	border-radius: 10px;
	background-image: linear-gradient(rgba(0,0,0,0.35), rgba(0,0,0,0.35)), linear-gradient(90deg,var(--tagline-grad-start)0%,var(--tagline-grad-mid)45%,var(--tagline-grad-end)100%);
	-webkit-background-clip: padding-box, text;
	background-clip: padding-box, text;
	color: transparent;
	text-shadow: 0 0 8px rgba(255,213,74,.35), 0 0 22px rgba(255,191,0,.22);
	backdrop-filter: blur(8px);
	/* Outer outline (does not affect layout width) */
	box-shadow: 0 0 0 2px #ffd54a;
	transition: transform .2s var(--ui-ease), box-shadow .2s var(--ui-ease);
}

.contact-link:hover { transform: translateY(-2px); box-shadow: 0 0 0 2px #ffd54a, 0 10px 28px rgba(255, 213, 74, 0.22); }

.contact-link:focus-visible { outline: none; box-shadow: 0 0 0 3px #ffd54a, 0 12px 30px rgba(255, 213, 74, 0.28); }

.contact-link:hover { color:#000; background:#ffd54a; transform:translateY(-2px); box-shadow: 0 0 0 2px #ffd54a, 0 8px 25px rgba(255, 213, 74, 0.3); }

/* Footer (fixed bottom-right, only visible at end via JS) */
.site-footer { 
	position: fixed; 
	right: 16px; 
	bottom: 12px; 
	color: rgba(255,255,255,0.6); 
	font: 400 12px/1.4 var(--font-sans-base); 
	letter-spacing: .02em; 
	user-select: none; 
	pointer-events: none; 
	z-index: 9; 
	opacity: 0; 
	transition: opacity .35s var(--ui-ease);
}
.site-footer.is-visible { opacity: 1; }
.scene-panel .sc3-inner > h3.sc3-sub:first-of-type { margin-top:0; }
/* Lead line (shared) - Increased title size with !important to ensure override */
.scene-panel .sc2-lead { 
	font-size:clamp(1.3rem, 1.1rem + 0.8vw, 1.7rem) !important; 
	line-height:1.3; 
	letter-spacing:.015em; 
	margin:.15rem 0 1.35rem; 
	font-weight:500; 
	background:linear-gradient(90deg,#ffffff 0%,#f2efe9 55%,#ffffff 100%); 
	-webkit-background-clip:text; 
	background-clip:text; 
	color:transparent; 
	filter:drop-shadow(0 2px 6px rgba(0,0,0,.55)); 
	padding-bottom:.25em; 
}
/* Paragraphs */
.scene-panel p { margin:0 0 0.95rem; font-weight:300; letter-spacing:.01em; font-size:var(--sc-panel-body-size) !important; line-height:1.34; }
.scene-panel p:last-child { margin-bottom:.25rem; }
.scene-panel strong { font-weight:600; }
/* Links */
.scene-panel a { color:#ffd54a; text-decoration:none; position:relative; }
.scene-panel a:after { content:""; position:absolute; left:0; bottom:-2px; height:1px; width:100%; background:currentColor; transform:scaleX(.4); transform-origin:left center; transition:transform .35s var(--ui-ease); }
.scene-panel a:hover:after { transform:scaleX(1); }
.scene-panel a:focus-visible { outline:2px solid #ffd54a; outline-offset:2px; border-radius:2px; }
/* Remove obsolete veil pseudo-elements */
body.veil-left-active::before, body.veil-right-active::after { content:none !important; }
/* Placeholder media queries for future mobile pass */
@media (max-width:900px){
	.scene-panel { 
		/* Increase outer edge spacing while reducing internal padding */
		width: calc(100vw - clamp(40px, 8vw, 72px)); /* adaptive side gutters (min 40px, grow with viewport) */
		padding: clamp(18px, 4vw, 32px); /* lighter inner padding to tighten text box */
		font-size: var(--sc-panel-font-size-mobile);
		left: 50% !important; /* center horizontally */
		right: auto !important;
		opacity: 1 !important; /* Keep all panels visible on mobile */
		pointer-events: auto !important; /* Keep panels interactive */
	}
	/* Increase text sizes on mobile for better readability */
	.scene-panel .sc2-h { 
		font-size: clamp(1.8rem, 1.5rem + 1.2vw, 2.5rem) !important; /* Larger headings */
	}
	.scene-panel .sc2-lead { 
		font-size: clamp(1.6rem, 1.3rem + 1vw, 2.1rem) !important; /* Larger lead text */
	}
	.scene-panel p { 
		font-size: clamp(1.2rem, 1rem + 0.8vw, 1.6rem) !important; /* Larger body text */
		line-height: 1.5 !important; /* Better line height for readability */
	}
	/* JS composes translateX(-50%) + translateY(...) on mobile for all panels */
	#scene3-copy.scene-panel { top:122vh; }
}


/* =======================================================================
   COMPONENT: HERO TAGLINE
   -----------------------------------------------------------------------
   Positioned low in viewport (≈80vh) then animated upward/fading as the
   user advances through Scene 1. JS (render loop) manipulates transform
   & opacity; this block confines purely stylistic concerns.
   ======================================================================= */
/* Container */
#hero-tagline.site-tagline { 
	position:absolute; 
	/* Bottom-right corner of content box (no right padding) sits at (90vw,80vh) */
	top:80vh; 
	left:90vw; 
	transform:translate(-100%, -100%); /* move width + height back so bottom-right locks to anchor */
	width:auto; 
	max-width:1600px; 
	padding:0; /* padding moved to inner element to allow equal left/right without shifting anchor */
	text-align:right; 
	font-family:var(--font-tagline); 
	pointer-events:none; 
	overflow:visible; 
}
/* Text element */
#hero-tagline .ty-tagline { 
	position:relative;display:inline-flex;flex-direction:column;align-items:flex-end;max-width:100%;
	padding: 0 24px; /* equal horizontal padding for the text box */
	font-family:'Graphik',var(--font-tagline-base) !important;
	font-weight:700;letter-spacing:.055em;line-height:1.05;
	text-transform:uppercase;background:linear-gradient(90deg,var(--tagline-grad-start)0%,var(--tagline-grad-mid)45%,var(--tagline-grad-end)100%);
	-webkit-background-clip:text;background-clip:text;color:transparent;
	text-shadow:
		0 0 8px rgba(255,213,74,.46),
		0 0 22px rgba(255,191,0,.30),
		0 0 52px rgba(255,168,0,.22);
	filter:brightness(1.08);
	opacity:0;transform:translateY(18px);transition:opacity .65s var(--ui-ease),transform .65s var(--ui-ease);
	text-align:right;
	/* Slight overall upscale */
	font-size:1.05em;
}
#hero-tagline .ty-tagline .tg-line { display:block; white-space:nowrap; }
#hero-tagline .ty-tagline .tg-line + .tg-line { margin-top:.18em; }
#hero-tagline.is-visible .ty-tagline { opacity:1; transform:translateY(0); }

/* Fine-grained adjustments by common 2024 breakpoints */
@media (max-width: 479.98px){
	#hero-tagline.site-tagline { 
		top: 45vh; 
		width: 95%; 
		padding: 5; 
		text-align: center;
		left: 100%;
		transform: translateX(-50%);
	}
	#hero-tagline .ty-tagline { 
		font-size: clamp(1.8rem, 2.5vw, 2.5rem); 
		letter-spacing: .02em; 
		line-height: 1.2;
		/* Center the tagline text and lines on small mobile */
		align-items: flex-end;
		text-align: right;
		padding: 0 5px; /* equal small padding on both sides */
	}
	
	/* Make backers section more visible on mobile */
	.backers-section-standalone {
		top: 20vh; /* Position at 130 for mobile (5vh earlier than desktop) */
		width: 95%;
		padding: 20px 10px;
		opacity: 0;
	}
	
	.contact-section-standalone {
		top: 64vh; /* Position at 135 for mobile (5vh earlier than desktop) */
		width: 95%;
		opacity: 0 ;
	}
	
	.backers-container-standalone .backed-by-label {
		font-size: 2rem;
		margin-bottom: 10px;
	}
}
@media (min-width:480px) and (max-width:767.98px){
	#hero-tagline.site-tagline { top:70vh; width:85%; padding:0; text-align: right; }
	#hero-tagline .ty-tagline {
		font-size:clamp(var(--fs-tagline-lg), 6.0vw, var(--fs-tagline-xl));
		/* Right-align the tagline text and lines on larger mobile */
		align-items: flex-end;
		text-align: right;
		padding: 0 8px; /* equal medium padding on both sides */
	}
}
@media (min-width:768px) and (max-width:1023.98px){
	#hero-tagline.site-tagline { top:74vh; text-align: right; }
	#hero-tagline .ty-tagline {
		font-size:clamp(var(--fs-tagline-md), 3.2vw, var(--fs-tagline-lg));
		/* Right-align the tagline text and lines on tablets */
		align-items: flex-end;
		text-align: right;
	}
}
@media (min-width:1024px) and (max-width:1439.98px){
	#hero-tagline .ty-tagline { font-size:clamp(var(--fs-tagline-xl), 2.4vw, var(--fs-tagline-2xl)); }
}
@media (min-width:1440px) and (max-width:1599.98px){
	#hero-tagline .ty-tagline { font-size:clamp(var(--fs-tagline-2xl), 1.9vw, var(--fs-tagline-3xl)); letter-spacing:.04em; }
}
@media (min-width:1600px){
	#hero-tagline .ty-tagline { font-size:clamp(var(--fs-tagline-3xl), 1.55vw, 4.2rem); letter-spacing:.035em; }
}

/* =======================================================================
   COMPONENT: TOP BAR (Navigation)
   -----------------------------------------------------------------------
   Sticky UI layer containing brand + primary links. Values preserved to
   avoid visual regression; variables expose future theming surface.
   ======================================================================= */
.topbar { 
	display:flex; 
	align-items:center; 
	gap:var(--nav-gap); 
	pointer-events:auto; 
	padding:var(--nav-padding-top) var(--nav-padding-right) var(--nav-padding-bottom) var(--nav-padding-left); 
	font-family:var(--font-sans-base);
	z-index: 1000; /* Ensure nav bar is in front of everything */
	position: relative;
}

/* Subtle blurred shadow/glow behind nav elements */
.topbar::before {
	content:"";
	position:absolute;
	inset:0;
	margin:0; /* optionally could inset by a few px if needed */
	border-radius:18px; /* soft rounded backdrop */
	background:rgba(0,0,0,0.22); /* low-opacity dark veil */
	filter:blur(24px); /* heavy blur for very soft edge */
	z-index:-1; /* sit behind nav content */
	pointer-events:none;
}

/* Slight strengthening on large screens only (keeps mobile light) */
@media (min-width:1024px){
	.topbar::before { background:rgba(0,0,0,0.28); filter:blur(26px); }
}
.topbar .brand { order:0; }
.topbar .logo { height:var(--logo-height); width:auto; display:block; filter:drop-shadow(0 1px 2px rgba(0,0,0,.35)); margin:0; }

/* Hamburger removed */

/* Inline top navigation (primary) */
.nav-menu { position:relative; }
.nav-menu .brand { display:flex; align-items:center; width:100%; }
/* Re-layout: logo left, links top-right */
.nav-menu .brand > .logo { margin-right:auto; }
.nav-links { list-style:none; display:flex; gap:var(--nav-links-gap); margin:0 0 0 auto; padding:0; position:relative; top:0; align-self:flex-start; }
.nav-links li { margin:0; padding:0; }
.nav-links a { font:400 var(--fs-nav)/1.2 'Graphik','Helvetica Neue',Arial,system-ui,sans-serif !important; letter-spacing:.6px; text-transform:uppercase; color:var(--color-fg); text-decoration:none; position:relative; padding:4px 0 6px; display:inline-block; text-shadow:var(--shadow-text-nav); }
.nav-links a:after { content:""; position:absolute; left:0; bottom:0; height:2px; width:100%; background:#ffd54a; transform:scaleX(0); transform-origin:left center; transition:transform var(--ui-speed-fast) var(--ui-ease); border-radius:2px; }
.nav-links a:hover { color:#ffd54a; text-shadow:0 2px 12px rgba(0,0,0,.30); }
.nav-links a:hover:after { transform:scaleX(1); }
@media (max-width:640px){
	.nav-links a { font-size:15px; padding:15px 0 8px; }
	/* Equal spacing: logo↔About = between links = Join↔edge */
	.topbar { padding-right: 0; padding-left: 12px; }
	.nav-menu .brand > .logo { margin-right: 0; }
	.nav-links { 
		top:calc(var(--logo-height) * -0.08);
		margin: 0; 
		flex: 1 1 auto; /* fill remaining row width to the right of logo */
		width: auto;
		justify-content: space-evenly; /* equal outer + inner spacing */
		gap: 0; /* spacing controlled by space-evenly */
		padding-left: 0; 
		padding-right: 0;
	}
}

/* Apply the same even spacing behavior for larger mobile (portrait tablets) */
@media (min-width:641px) and (max-width:767.98px){
	.topbar { padding-right: 0; padding-left: 16px; }
	.nav-menu .brand > .logo { margin-right: 0; }
	.nav-links { 
		margin: 0; 
		flex: 1 1 auto; 
		width: auto; 
		justify-content: space-evenly;
		gap: 0;
		padding-left: 0; 
		padding-right: 0;
	}
}

a, button, input, select {
	pointer-events: auto;
}

.lil-gui {
	z-index: 2 !important; /* TODO Solve this in HTML */
}

@media all and ( max-width: 640px ) {
	.lil-gui.root { 
		right: auto;
		top: auto;
		max-height: 50%;
		max-width: 80%;
		bottom: 0;
		left: 0;
	}
}

#overlay {
	position: absolute;
	font-size: 16px;
	z-index: 2;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	background: rgba(0,0,0,0.7);
}

	#overlay button {
		background: transparent;
		border: 0;
		border: 1px solid rgb(255, 255, 255);
		border-radius: 4px;
		color: #ffffff;
		padding: 12px 18px;
		text-transform: uppercase;
		cursor: pointer;
	}

#notSupported {
	width: 50%;
	margin: auto;
	background-color: #f00;
	margin-top: 20px;
	padding: 10px;
}

/* =============================================================
	 Desktop-only final stretch layout adjustments (no mobile impact)
	 - Move Backers section to left side narrower column
	 - Place Contact (Get in Touch) under Vision panel on right
	 - Faster panel scrolling handled in JS; this block only handles layout
	 ============================================================= */
@media (min-width:1024px){
	.backers-section-standalone { position:absolute; left:50%; right:auto; transform:translateX(-50%); width:auto; max-width:60vw; text-align:center; }
	.backers-container-standalone { flex-direction:row; justify-content:center; align-items:center; gap:1.5rem; flex-wrap:nowrap; }
	.backers-label { 
		margin:0; 
		flex-shrink:0; 
		padding:0 8px 0 0; /* reduced horizontal padding */
		font-size:clamp(.85rem,.7rem + .35vw,1.05rem); /* smaller than logos */
		letter-spacing:.12em;
		font-weight:600;
		position:relative;
		top:4px; /* nudge slightly below vertical center of logos */
	}
	.backers-names { display:flex; align-items:center; flex-wrap:nowrap; gap:1.1rem; justify-content:center; }
	.backers-section-standalone .backer-logo { height:3.2rem; }
	/* Contact section: align with Vision (panel-right) horizontal bounds and add 100px padding above button */
	.contact-section-standalone { 
		Top:78vh; 
		left:auto; 
		right:var(--panel-side-offset); 
		transform:none; 
		width:calc(50vw - var(--panel-side-offset) - var(--panel-gap)); 
	}
	/* 50px exact spacing below Vision: contact container top padding = 50px */
	.contact-container { padding:50px 0 1.8rem; display:flex; justify-content:center; }
	/* Let the button size to its content with equal padding; keep centered */
	.contact-link { font-size:clamp(1.05rem,0.9rem + .85vw,1.9rem); }
}