.spacer-50 { display: none; height: 0; }

/* Dedicated wrapper to control CTA vertical placement below hero */
/* Remove cta-wrap layout; button lives inside hero grid */
/* Base reset kept intentionally minimal */
* { box-sizing: border-box; }
:root { --unit: 16px; --stack: 16px; }
html, body { 
  height: 100%; 
  overflow-y: auto; /* show scrollbar only when content overflows */
}
body {
  margin: 0;
  background: #523621;
  color: #fff;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Prevent body and html scroll when Our Work page is visible */
body.our-work-visible,
body:has(.our-work-page.visible) {
  overflow: hidden !important; /* prevent body scrollbar from appearing */
}

html:has(.our-work-page.visible) {
  overflow: hidden !important; /* prevent html scrollbar from appearing */
}

/* FK Grotesk Neue Regular */
@font-face {
  font-family: 'FK Grotesk Neue';
  src: url('assets/fonts/FKGroteskNeueTrial-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* FK Grotesk Semi Mono for the button */
@font-face {
  font-family: 'FK Grotesk Semi Mono';
  src: url('assets/fonts/FKGrotesk-SemiMono.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* FK Grotesk Mono Medium - using Medium weight for all mono text */
@font-face {
  font-family: 'FK Grotesk Mono';
  src: url('assets/fonts/FKGroteskMonoTrial-Medium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

.hero {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 16px; /* ensure items are stacked and centered */
  padding: 32px 24px;
  text-align: center;
  transition: opacity 600ms ease-in-out;
  position: relative;
  z-index: 100; /* below about page */
}

.hero.fade-out {
  opacity: 0;
  pointer-events: none;
}

.logo {
  width: min(340px, 48vw);
  height: auto;
  display: block;
  position: relative; /* enable stacking over/under orbiting orb */
  z-index: 50;
  margin: 0 0 calc(var(--stack) - 24px) 0; /* tagline sits 24px closer to logo */
  will-change: auto;
  animation: none;
  transform: none;
}

.tagline {
  margin: 0 0 var(--stack) 0; /* equal gap to button */
  font-family: 'FK Grotesk Neue', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  font-size: clamp(13px, 1.9vw, 17px); /* 2pt smaller (was 15-19px) */
  line-height: 1.1; /* tighter to balance equal gaps */
  letter-spacing: 0.01em;
  color: #fff;
  will-change: auto;
  animation: none;
  transform: none;
}

/* push the button further down from the tagline */
.tagline { margin-top: -12px; margin-bottom: 8px; }
.socials {
  position: fixed;
  bottom: 50%;
  left: 50%;
  transform: translate(-50%, calc(50% + 108px)); /* center horizontally, offset below center vertically (60px + 48px) */
  width: 80px; /* fixed width to ensure proper centering */
  height: 20px; /* fixed height */
  will-change: auto;
  animation: none;
  z-index: 300; /* stay above faded hero and about page */
}

/* Navigation text buttons */
.nav-btn {
  color: #16C26D;
  font-family: 'FK Grotesk Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
  font-weight: 500;
  font-size: 14px;
  text-decoration: none;
  cursor: pointer;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  transition: opacity 600ms ease-in-out, color 300ms ease-in-out;
  white-space: nowrap;
  text-align: center;
  display: block;
  z-index: 300;
}

.nav-btn:focus-visible { outline: 2px solid #16C26D; outline-offset: 4px; border-radius: 6px; }
.nav-btn:hover { 
  color: #ffffff; /* fade to white on hover */
}

.nav-btn#home-link {
  opacity: 0;
  pointer-events: none; /* prevent clicks when invisible */
  transition: opacity 600ms ease-in-out, color 300ms ease-in-out; /* match about page transition, include color */
  will-change: opacity; /* hint to browser for smoother transition */
}

.nav-btn#our-work-link {
  opacity: 1; /* visible on home page */
  top: calc(50% + 30px); /* stacked below center */
  transform: translate(-50%, -50%);
}

.nav-btn#our-work-link.hidden {
  opacity: 0;
  pointer-events: none;
}

.nav-btn#about-link {
  opacity: 1; /* visible on home page */
  top: calc(50% + 54px); /* moved down 4px from 50px on desktop only */
  transform: translate(-50%, -50%);
}

.nav-btn#about-link.hidden {
  opacity: 0;
  pointer-events: none;
}

/* Email button - positioned where Home button is (nav position), only visible on about page */
.nav-btn.email-btn {
  /* Same position as nav buttons (50% top, centered) */
  top: calc(50% + 108px); /* 108px below center, same as socials container offset */
  opacity: 0;
  pointer-events: none;
}

.nav-btn.email-btn.visible {
  opacity: 1 !important;
  pointer-events: auto !important;
  position: fixed !important;
  top: 50vh !important; /* viewport center */
  left: 50% !important;
  transform: translate(-50%, calc(-50% + 108px)) !important; /* center horizontally, shift down 108px */
  z-index: 400 !important;
}

/* Home button - on about page, position it above the about text */
.nav-btn#home-link.visible {
  opacity: 1 !important;
  pointer-events: auto !important;
  position: fixed !important;
  top: 50vh !important; /* viewport center */
  left: 50% !important;
  transform: translate(-50%, calc(-50% - 108px)) !important; /* center horizontally, shift up 108px */
  z-index: 400 !important;
  /* Transition will use the base .nav-btn#home-link transition when .visible is removed */
}

/* Home button at top when on Our Work page */
.nav-btn#home-link.visible.on-our-work {
  top: 135px !important; /* moved down 50px from 85px */
  transform: translate(-50%, 0) !important; /* center horizontally, no vertical offset */
  color: #ffffff !important; /* white to contrast with black background */
  transition: opacity 600ms ease-in-out, color 300ms ease-in-out !important; /* smooth transitions like other buttons */
}

/* Home button hover - same effect as other buttons */
.nav-btn#home-link.visible.on-our-work:hover {
  color: #16C26D !important; /* green on hover - same as other buttons on home page */
}

/* Staggered floating so icons don't move in sync */
.socials .icon:nth-child(2) { animation-delay: .8s; }

/* floating animation removed per request */


.cta {
  display: inline-block;
  padding: 4px 8px !important; /* enforce smaller size */
  border-radius: 999px;
  background: #523621; /* brown */
  color: #fff;
  text-decoration: none;
  font-family: 'FK Grotesk Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
  font-weight: 500;
  font-size: 10px !important; /* enforce smaller text */
  line-height: 1.2;
  transition: background-color 140ms ease; /* only color changes on hover */
  margin-top: 0;
}

.cta:hover { background: #16C26D; }
.cta:active { background: #16C26D; }
.cta:focus-visible { outline: 2px solid #523621; outline-offset: 4px; }

@media (prefers-reduced-motion: reduce) {
  .cta { transition: none; }
}

@media (max-width: 768px) {
  /* Prevent scrolling on home page (mobile only) */
  html:not(:has(.our-work-page.visible)):not(:has(.about-page.visible)),
  body:not(.our-work-visible):not(:has(.our-work-page.visible)):not(:has(.about-page.visible)) {
    overflow: hidden !important;
    height: 100vh !important;
  }
  
  /* Prevent scrolling on about page (mobile only) */
  html:has(.about-page.visible),
  body:has(.about-page.visible) {
    overflow: hidden !important;
    height: 100vh !important;
    background-color: #272727 !important; /* match about page background */
  }
  
  /* Mobile adjustments */
  .hero { 
    gap: calc(var(--unit) - 2px); 
    padding: 24px 16px; 
  }
  
  .logo { 
    width: min(280px, 75vw); 
    max-width: 90vw;
  }
  
  .tagline {
    font-size: clamp(12px, 4vw, 14px); /* 2pt smaller (was 14-16px) */
    margin-top: -20px;
    margin-bottom: 12px;
  }
  
  /* Navigation buttons - adjust for mobile */
  .nav-btn {
    font-size: 13px;
  }
  
  .socials {
    width: 90px;
    transform: translate(-50%, calc(50% + 80px)); /* closer on mobile */
  }
  
  /* Navigation buttons - stacked on mobile */
  .nav-btn#our-work-link {
    top: calc(50% + 30px);
    transform: translate(-50%, -50%);
  }
  
  .nav-btn#about-link {
    top: calc(50% + 50px); /* moved up 5px more from 55px */
    transform: translate(-50%, -50%);
  }
  
  /* Email button positioning on mobile - match desktop pattern */
  /* Desktop: top: calc(50% + 108px) - for mobile, use 15px offset (25px - 10px moved up) */
  .nav-btn.email-btn.visible {
    position: fixed !important;
    top: 50vh !important; /* viewport center */
    left: 50% !important;
    transform: translate(-50%, calc(-50% + 29px)) !important; /* center horizontally, shift down 29px (moved down 2px from 27px) */
    z-index: 400 !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }
  
  /* Home button on about page - adjust for mobile */
  /* Match desktop pattern: top: 50vh, transform: translate(-50%, calc(-50% - 108px)) */
  /* For mobile, use 120px offset (80px + 40px moved up) */
  .nav-btn#home-link.visible {
    position: fixed !important;
    top: 50vh !important; /* viewport center */
    left: 50% !important;
    transform: translate(-50%, calc(-50% - 135px)) !important; /* center horizontally, shift up 135px (moved down 10px from 145px) */
    z-index: 400 !important;
  }
  
  /* Our Work page - mobile adjustments */
  .our-work-page {
    padding: 0 !important;
    align-items: center !important; /* center vertically */
    justify-content: center !important; /* center horizontally */
    overflow-y: auto !important;
    padding-bottom: 20px !important; /* reduced bottom padding */
    flex-direction: column !important;
  }
  
  /* Fixed header bar for Home button on mobile */
  .our-work-page::before {
    content: '';
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    height: 70px;
    background-color: #272727;
    z-index: 1000;
    flex-shrink: 0;
  }
  
  /* Spacer to prevent content from scrolling under Home button - mobile only */
  .mobile-home-spacer {
    display: none !important; /* not needed with header bar */
  }
  
  .our-work-content {
    gap: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important; /* center horizontally */
    margin-top: 0 !important; /* remove negative margin */
    padding-top: 80px !important; /* increased padding to create room for Home button (44px + 36px buffer) */
    align-items: center !important; /* center content */
    justify-content: center !important; /* center vertically */
    display: flex !important;
    flex-direction: column !important;
  }
  
  /* Home button on Our Work page - mobile positioning in header bar */
  .nav-btn#home-link.visible.on-our-work {
    top: 69px !important; /* moved down 25px from 44px */
    position: fixed !important;
    left: 50% !important;
    transform: translate(-50%, 0) !important;
    z-index: 1001 !important; /* above header bar */
    color: #ffffff !important;
    pointer-events: auto !important;
  }
  
  .clients-grid {
    gap: 28px !important;
    padding: 0 24px !important;
    max-width: 100% !important;
    width: 100% !important;
  }
  
  .client-item {
    padding: 14px 28px !important; /* larger touch targets on mobile with horizontal padding */
    min-height: 48px !important; /* larger minimum touch target on mobile */
    width: auto !important; /* prevent full width */
    max-width: 100% !important;
    height: auto !important; /* prevent fixed height */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  
  .client-name {
    font-size: 13px !important;
    display: inline-block !important;
  }
  
  /* About page text - better mobile sizing for legibility */
  .about-text {
    font-size: clamp(20px, 5.5vw, 22px); /* larger for better readability */
    line-height: 1.6; /* increased line height for easier reading */
    padding: 0 24px; /* more padding for comfortable reading */
    max-width: 90vw;
  }
  
  /* Idea messages - adjust for mobile */
  #idea-msg, #idea-msg-2 {
    font-size: 13px;
    padding: 6px 10px;
    max-width: 85vw;
  }
  
  /* Orbs - slightly smaller on mobile for better visibility */
  .orb {
    width: 14px;
    height: 14px;
  }
}

@media (max-width: 480px) {
  /* Prevent scrolling on home page (small mobile only) */
  html:not(:has(.our-work-page.visible)):not(:has(.about-page.visible)),
  body:not(.our-work-visible):not(:has(.our-work-page.visible)):not(:has(.about-page.visible)) {
    overflow: hidden !important;
    height: 100vh !important;
  }
  
  /* Prevent scrolling on about page (small mobile only) */
  html:has(.about-page.visible),
  body:has(.about-page.visible) {
    overflow: hidden !important;
    height: 100vh !important;
    background-color: #272727 !important; /* match about page background */
  }
  
  /* Small mobile adjustments */
  .logo { 
    width: min(240px, 80vw); 
  }
  
      .tagline {
        font-size: clamp(11px, 4.5vw, 13px); /* 2pt smaller (was 13-15px) */
        margin-top: -18px;
      }
  
  .nav-btn {
    font-size: 12px;
  }
  
  /* Navigation buttons - stacked on small mobile */
  .nav-btn#our-work-link {
    top: calc(50% + 30px);
    transform: translate(-50%, -50%);
  }
  
  .nav-btn#about-link {
    top: calc(50% + 50px); /* moved up 5px more from 55px */
    transform: translate(-50%, -50%);
  }
  
      .our-work-page {
        padding: 0 !important;
        align-items: center !important; /* center vertically */
        justify-content: center !important; /* center horizontally */
        overflow-y: auto !important;
        padding-bottom: 16px !important; /* reduced bottom padding */
        flex-direction: column !important;
      }
      
      /* Fixed header bar for Home button on small mobile */
      .our-work-page::before {
        content: '';
        position: sticky;
        top: 0;
        left: 0;
        right: 0;
        height: 65px;
        background-color: #272727;
        z-index: 1000;
        flex-shrink: 0;
      }
      
      /* Spacer to prevent content from scrolling under Home button */
      .mobile-home-spacer {
        display: none !important; /* not needed with header bar */
      }
      
      .our-work-content {
        gap: 0 !important;
        padding: 0 !important;
        width: 100% !important;
        margin: 0 auto !important; /* center horizontally */
        margin-top: 0 !important; /* remove negative margin */
        padding-top: 75px !important; /* increased padding to create room for Home button (40px + 35px buffer) */
        align-items: center !important; /* center content */
        justify-content: center !important; /* center vertically */
        display: flex !important;
        flex-direction: column !important;
      }
      
      /* Home button on Our Work page - small mobile positioning in header bar */
      .nav-btn#home-link.visible.on-our-work {
        top: 65px !important; /* moved down 25px from 40px */
        position: fixed !important;
        left: 50% !important;
        transform: translate(-50%, 0) !important;
        z-index: 1001 !important; /* above header bar */
        color: #ffffff !important;
        pointer-events: auto !important;
      }
      
      .clients-grid {
        gap: 24px !important;
        padding: 0 20px !important;
        max-width: 100% !important;
        width: 100% !important;
      }
      
      .client-item {
        padding: 12px 24px !important;
        min-height: 44px !important;
        width: auto !important; /* prevent full width */
        max-width: 100% !important;
        height: auto !important; /* prevent fixed height */
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
      }
      
      .client-name {
        font-size: 12px !important;
        display: inline-block !important;
      }
      
      .about-text {
        font-size: clamp(19px, 6vw, 21px); /* larger for small screens */
        line-height: 1.6;
        padding: 0 20px;
      }
  
  #idea-msg, #idea-msg-2 {
    font-size: 12px;
    padding: 5px 8px;
  }
  
  .orb {
    width: 12px;
    height: 12px;
  }
}

/* Floating bouncing orbs */
.orb {
  position: fixed;
  top: 0;
  left: 0;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #16C26D;
  box-shadow: 0 0 6px rgba(22, 194, 109, 0.3); /* reduced glow */
  z-index: 150; /* above hero (100) but below about page (200) and icons (300) */
  will-change: transform;
  pointer-events: auto; /* allow clicking */
  cursor: pointer;
  touch-action: none; /* better tapping on mobile */
  transition: border-radius 260ms ease, clip-path 260ms ease, background 600ms ease-in-out, box-shadow 600ms ease-in-out, opacity 600ms ease-in-out; /* size animated via JS */
  filter: drop-shadow(0 2px 4px rgba(22,194,109,0.3)); /* removed blur for sharper rendering */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  backface-visibility: hidden; /* improve rendering performance */
  transform: translateZ(0); /* force GPU acceleration with sharp rendering */
  outline: 0.5px solid transparent; /* helps with rendering crisp edges on some browsers */
}

/* Orbs above about page - ensure they're visible */
body.about-visible .orb,
body:has(.about-page.visible) .orb {
  z-index: 250 !important; /* above about page (200) */
  position: fixed !important; /* ensure fixed positioning is maintained */
}

/* Orbs behind thumbnails on Our Work page - orbs are now inside page DOM */
.our-work-page .orb {
  position: absolute !important; /* change from fixed to absolute when inside page */
  z-index: 1 !important; /* within page's stacking context, below thumbnails */
  top: 0 !important; /* reset top/left since absolute positioning */
  left: 0 !important;
  transition: border-radius 260ms ease, clip-path 260ms ease, background 600ms ease-in-out, box-shadow 600ms ease-in-out, opacity 600ms ease-in-out !important; /* preserve transitions but not position/transform */
  will-change: transform !important; /* keep transform optimization */
  backface-visibility: hidden !important; /* prevent flickering during position changes */
  transform-style: preserve-3d !important; /* maintain 3D transform context */
}

.orb.fade-to-white {
  background: #fff;
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.3); /* normal glow */
}

.orb::after {
  content: '';
  position: absolute;
  top: -10px;
  right: -10px;
  bottom: -10px;
  left: -10px;
}

/* Shape variants applied by JS */
.shape-circle { border-radius: 50%; clip-path: none; }
.shape-rectangle { border-radius: 4px; clip-path: inset(0); }
.shape-triangle {
  border-radius: 0;
  /* equilateral-like triangle filling box consistently */
  clip-path: polygon(50% 6%, 4% 94%, 96% 94%);
}
.shape-star {
  border-radius: 0;
  /* simple 5-point star */
  clip-path: polygon(
    50% 6%, 61% 34%, 95% 34%,
    67% 56%, 78% 90%, 50% 70%,
    22% 90%, 33% 56%, 5% 34%,
    39% 34%
  );
}

/* Idea message */
#idea-msg, #idea-msg-2 {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.2);
  padding: 8px 12px;
  border-radius: 10px;
  font-family: 'FK Grotesk Neue', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  font-weight: 600;
  letter-spacing: 0.01em;
  font-size: 14px; /* 1pt smaller */
  white-space: nowrap; /* force single line */
  backdrop-filter: blur(2px);
  z-index: 400; /* above everything including hero (100), orbs (150), about page (200), and icons (300) */
  display: none;
  opacity: 0;
  transition: opacity 480ms ease-in-out;
}


.idea-link { text-decoration: none; color: #fff; }
.idea-link:focus-visible { outline: 2px solid #16C26D; outline-offset: 4px; }

/* Background overlay for page transitions */
.background-overlay {
  position: fixed;
  inset: 0;
  background-color: #272727;
  z-index: 1; /* behind everything but above body */
  opacity: 0;
  transition: opacity 600ms ease-in-out;
  pointer-events: none; /* allow clicks to pass through */
}

.background-overlay.visible {
  opacity: 1;
}

/* Our Work page */
.our-work-page {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center; /* center content vertically */
  justify-content: center;
  padding: 60px 24px 40px;
  background-color: #272727; /* solid black background */
  z-index: 200; /* page container */
  isolation: isolate; /* create stacking context for children */
  opacity: 0;
  transition: opacity 600ms ease-in-out, visibility 0ms 600ms; /* delay visibility until after opacity fade */
  pointer-events: none; /* allow clicks to pass through to orbs */
  visibility: hidden; /* hide from interaction when not visible */
  overflow: hidden; /* no scrollbar, just like home page */
}

.our-work-page.visible {
  opacity: 1;
  visibility: visible;
  transition: opacity 600ms ease-in-out, visibility 0ms; /* visibility changes immediately when becoming visible */
  pointer-events: auto; /* allow clicks on client items */
}

/* Hide spacer on desktop - will be overridden in mobile media query */
.mobile-home-spacer {
  display: none;
}

/* Hide header bar on desktop */
.our-work-page::before {
  display: none;
}

.our-work-content {
  width: 100%;
  max-width: 1600px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  padding-top: 0; /* No padding needed since page is centered */
  pointer-events: none; /* allow orbs to be clickable behind content */
  position: relative;
  z-index: 10; /* above orbs (z-index 1) */
  isolation: isolate; /* create new stacking context for buttons */
}


/* Clients Grid - Text buttons layout */
.clients-grid {
  display: flex;
  flex-direction: column;
  gap: 32px;
  width: 100%;
  max-width: 600px;
  padding: 0 60px;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 20; /* ensure grid is above orbs */
}

.client-item {
  text-decoration: none;
  color: #16C26D;
  cursor: pointer;
  position: relative;
  z-index: 500 !important; /* very high z-index to ensure buttons are above orbs */
  pointer-events: auto; /* allow clicking on buttons */
  isolation: isolate; /* create new stacking context */
  transition: all 300ms ease-in-out;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px 32px; /* add padding for button-like appearance */
  min-height: 44px; /* ensure minimum touch target size */
  width: auto; /* prevent full width */
  max-width: 100%;
  height: auto; /* prevent fixed height */
  background: rgba(22, 194, 109, 0.1); /* subtle green background */
  border: 1px solid rgba(22, 194, 109, 0.3); /* green border */
  border-radius: 8px; /* rounded corners */
  box-shadow: 
    inset 0 1px 2px rgba(255, 255, 255, 0.1),
    inset 0 -1px 2px rgba(0, 0, 0, 0.2),
    0 2px 4px rgba(0, 0, 0, 0.1); /* embossed effect with inset shadows */
  backdrop-filter: blur(4px);
}

.client-item:hover {
  color: #ffffff; /* fade to white on hover */
  background: rgba(22, 194, 109, 0.2); /* slightly brighter on hover */
  border-color: rgba(22, 194, 109, 0.5);
  box-shadow: 
    inset 0 1px 2px rgba(255, 255, 255, 0.15),
    inset 0 -1px 2px rgba(0, 0, 0, 0.15),
    0 3px 6px rgba(0, 0, 0, 0.15); /* slightly more pronounced on hover */
}

.client-item:focus-visible {
  outline: 2px solid #16C26D;
  outline-offset: 4px;
  border-radius: 6px;
}

.client-item:active {
  color: #ffffff; /* white on active/click */
  background: rgba(22, 194, 109, 0.25); /* brighter on active */
  box-shadow: 
    inset 0 2px 4px rgba(0, 0, 0, 0.3),
    inset 0 -1px 1px rgba(255, 255, 255, 0.1),
    0 1px 2px rgba(0, 0, 0, 0.1); /* pressed/inset effect */
  transform: translateY(1px); /* slight press down effect */
}

.client-name {
  font-family: 'FK Grotesk Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
  font-size: 14px;
  font-weight: 500;
  color: inherit;
  letter-spacing: 0;
  line-height: 1.3;
  text-transform: none;
  white-space: nowrap;
  transition: color 300ms ease-in-out;
}

/* About page */
.about-page {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 24px;
  background-color: #272727; /* black background to match overlay */
  z-index: 200;
  opacity: 0;
  transition: opacity 600ms ease-in-out, visibility 0ms 600ms; /* delay visibility until after opacity fade */
  pointer-events: none; /* allow clicks to pass through to orbs */
  visibility: hidden; /* hide from interaction when not visible */
}

.about-page.visible {
  opacity: 1;
  visibility: visible;
  transition: opacity 600ms ease-in-out, visibility 0ms; /* visibility changes immediately when becoming visible */
}

.about-text {
  max-width: 600px;
  font-family: 'FK Grotesk Neue', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  font-size: clamp(13px, 1.8vw, 18px); /* larger for better readability */
  line-height: 1.6; /* increased line height */
  color: #fff;
  text-align: center;
}