/* Reset CSS */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Modern minimal design */
@font-face {
  font-family: 'AtypDisplay';
  src: url('fonts/AtypDisplay-Regular.woff2') format('woff2'),
       url('fonts/AtypDisplay-Regular.woff') format('woff'),
       url('fonts/AtypDisplay-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
:root {
  --primary: #0066ff;
  --dark: #121212;
  --light: #f8f9fa;
  --accent: #0BA3F0;
  --text: #333333;
}

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  height: 100%;
  width: 100%;
}

body { 
  min-height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  overflow-y: auto; /* ensure scroll on mobile */
  display: flex;
  flex-direction: column;
  background-color: #EDEDEE;
  color: var(--text);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.main-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  width: 100%;
  overflow: visible;
  pointer-events: none;
}

.hero-content {
  z-index: 10;
  text-align: left;
  display: block;
  width: 100%;
  pointer-events: none;
  position: relative;
  min-height: 100vh;
  padding: 24vh 0 6vh;
}

.hero-content::before { content: none; }

/* Diffusive white gradient under hero text for readability */
.hero-content::after {
  content: "";
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(90deg,
    rgba(255,255,255,0.96) 0%,
    rgba(255,255,255,0.88) 50%,
    rgba(255,255,255,0.60) 65%,
    rgba(255,255,255,0.22) 75%,
    rgba(255,255,255,0.0) 100%);
  z-index: 1; /* behind text, above dots */
  pointer-events: none;
}

/* Main tagline styling */

.tagline {
  font-size: clamp(3rem, 6vw, 5.5rem);
  font-weight: 800;
  color: #00027A;
  line-height: 1.02;
  font-family: 'AtypDisplay', 'Inter', sans-serif;
  white-space: normal;
  text-wrap: balance; /* aim for 2 balanced lines where possible */
  margin: 0;
  text-align: left;
  display: block;
  position: relative;
  z-index: 4; /* headline above everything in hero */
  text-shadow: 0 0 15px rgba(255,255,255,1), 0 0 25px rgba(255,255,255,0.8);
}

.accent {
  color: var(--accent);
  font-weight: 800;
}

#wrap { 
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  z-index: 0;
  overflow: hidden;
}

#wrap svg { 
  width: 100%; 
  height: 100%; 
  display: block;
  margin: 0;
}

circle, ellipse, path, rect, polygon, use {
  pointer-events: all;
}

/* Manifesto */
.manifesto {
  position: relative;
  z-index: 2;
  background: transparent;
}

.manifesto-inner {
  max-width: 1080px;
  margin: 0;
  padding: 0 80px;
  position: relative;
  z-index: 3; /* ensure above overlay */
}

/* Flex layout for hero content */
.hero-stack { display: flex; flex-direction: column; gap: 22px; }
.hero-headline { display: flex; align-items: flex-end; }
.hero-copy { display: flex; flex-direction: column; gap: 0px; }
.mobile-br { display: none; }
.nowrap { white-space: nowrap; }

/* manifesto-lead removed: using h1.tagline now */

.manifesto-inner p {
  font-size: 1.125rem;
  line-height: 1.7;
  margin: 0.33rem 0;
  color: #00027A;
}

@media (max-width: 768px) {
  .hero-content { padding: 8vh 0 5vh; }
  .manifesto-inner { padding: 0 12px 0 20px; }
  .header-content { padding: 0 12px 0 0; }
  .footer-content { padding: 0 20px; }
  .tagline { font-size: clamp(2.25rem, 9vw, 3.25rem); text-wrap: balance; }
  .hero-headline { max-width: none; }
  .hero-stack { gap: 18px; }
  .hero-copy { gap: 12px; }
  .mobile-br { display: inline; }
}

/* Header */
/* Remove old header bar; replace with fixed logo over dots */
.logo-fixed {
  position: relative; /* scrolls with the page */
  padding: 24px 0 0 80px; /* top padding and align with text */
  z-index: 3;
  pointer-events: none;
}
.logo-fixed img { height: 42px; width: auto; display: block; } /* 20% bigger */

/* Footer removed */

.logo img {
  height: 24px;
  width: auto;
  display: block;
}

.contact a {
  color: var(--text);
  text-decoration: none;
  font-size: 1.1rem;
  transition: color 0.2s ease;
}

.contact a:hover { color: var(--accent); }

@media (max-width: 768px) {
  .tagline {
    font-size: clamp(2.25rem, 9vw, 3.25rem);
    line-height: 1.1;
    padding: 0; /* content container controls side padding */
    white-space: normal; /* allow wrapping on small screens */
  }
  
  .logo img {
    height: 30px;
  }
  
  /* Ensure header padding overrides desktop rule by placing it AFTER header block */
  .header-content {
    padding: 0 12px 0 20px; /* align logo with 20px content padding */
  }

  .contact a {
    font-size: 0.6rem;
  }
  .logo-fixed { padding: 32px 0 0 20px; }
}

@media (max-width: 480px) {
  .footer-content {
    padding: 0 15px;
  }
}

/* Inline email below manifesto */
.email-inline { padding: 20px 80px 40px; position: relative; z-index: 6; pointer-events: auto; }
.email-inline a {
  color: var(--text);
  text-decoration: none;
  font-size: 1.05rem;
  transition: color 0.2s ease, text-decoration-color 0.2s ease;
  text-underline-offset: 3px;
}
.email-inline a:hover,
.email-inline a:focus-visible {
  color: var(--accent);
  text-decoration-color: var(--accent);
}
@media (max-width: 768px) {
  .logo-fixed img { height: 24px; } /* 20% bigger on mobile too */
  .email-inline { padding: 16px 20px 28px; }
}