/* Reset and base styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Montserrat', Arial, sans-serif;
    background-color: #ffffff;
    overflow-x: hidden;
}

/* Global heading font family */
h1, h2, h3 {
    font-family: 'Montserrat', Arial, sans-serif;
}

/* Page Wrapper for central column effect */
.page-wrapper {
    max-width: 1200px; /* Max width of the content area */
    margin: 0 auto; /* Center the content wrapper */
    padding: 0 clamp(0rem, 4vw, 3rem); /* Responsive padding: 0 on small, scales to max 3rem */
    position: relative; /* For absolute positioning of children */
}

/* Hero Animation Styles */
.hero-container {
    position: absolute; /* Changed from fixed to absolute */
    top: 0vh; /* Remove top gap completely */
    left: 0;
    right: 0; /* ensure it respects the page-wrapper's horizontal padding/margins */
    width: auto; /* stretch between left/right insets */
    height: 75vh; /* Further reduced height to minimize bottom gap */
    background-color: transparent;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10; /* Hero text z-index */
    opacity: 1;
    transition: opacity 2s ease-out;
    pointer-events: none;
}

.knowledge-graph {
    position: absolute; /* Changed from fixed to absolute */
    top: 0vh; /* Match hero container top position */
    left: 0;
    right: 0; /* ensure it respects the page-wrapper's horizontal padding/margins */
    width: auto; /* stretch between left/right insets */
    height: 75vh; /* Match hero container height */
    z-index: 5; /* Animation behind hero text */
    pointer-events: none;
}

#graph-svg {
    width: 100%;
    height: 100%;
    display: block;
}

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

.hero-text {
    font-size: clamp(4rem, 12vw, 13.5rem); /* Responsive scaling: min 4rem, preferred 12vw, max 13.5rem */
    font-weight: 400;
    letter-spacing: -0.104em;
    font-family: 'Montserrat', Arial, sans-serif;
    text-transform: lowercase;
    white-space: nowrap;
    position: relative;
    z-index: 10;
}

.letter {
    color: #ffffff;
    display: inline-block;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Sea to sunset colors for each letter */
.letter:nth-child(1) { /* b */
    animation: fadeToLightBlue 2s ease-out forwards;
    animation-delay: 0.5s;
}

.letter:nth-child(2) { /* a */
    animation: fadeToSteelBlue 2s ease-out forwards;
    animation-delay: 0.5s;
}

.letter:nth-child(3) { /* r */
    animation: fadeToDodgerBlue 2s ease-out forwards;
    animation-delay: 0.5s;
}

.letter:nth-child(4) { /* k */
    animation: fadeToNavyBlue 2s ease-out forwards;
    animation-delay: 0.5s;
}

.letter:nth-child(5) { /* l */
    animation: fadeToCrimson 2s ease-out forwards;
    animation-delay: 0.5s;
}

.letter:nth-child(6) { /* e */
    animation: fadeToOrangeRed 2s ease-out forwards;
    animation-delay: 0.5s;
}

.letter:nth-child(7) { /* y */
    animation: fadeToDarkOrange 2s ease-out forwards;
    animation-delay: 0.5s;
}

@keyframes fadeToLightBlue {
    0% { color: #ffffff; }
    50% { color: #87CEEB; }
    100% { color: #ffffff; }
}

@keyframes fadeToSteelBlue {
    0% { color: #ffffff; }
    50% { color: #4682B4; }
    100% { color: #ffffff; }
}

@keyframes fadeToDodgerBlue {
    0% { color: #ffffff; }
    50% { color: #1E90FF; }
    100% { color: #ffffff; }
}

@keyframes fadeToNavyBlue {
    0% { color: #ffffff; }
    50% { color: #000080; }
    100% { color: #ffffff; }
}

@keyframes fadeToCrimson {
    0% { color: #ffffff; }
    50% { color: #DC143C; }
    100% { color: #ffffff; }
}

@keyframes fadeToOrangeRed {
    0% { color: #ffffff; }
    50% { color: #FF4500; }
    100% { color: #ffffff; }
}

@keyframes fadeToDarkOrange {
    0% { color: #ffffff; }
    50% { color: #FF8C00; }
    100% { color: #ffffff; }
}

/* Main Content Styles */
.main-content {
    position: relative; /* Ensure z-index works for children if needed */
    z-index: 20; /* Ensure it's above hero and animation */
    min-height: 100vh;
    opacity: 1; /* Make sure content is visible */
    transition: opacity 1s ease-in;
    padding-top: 75vh; /* Push content below the hero section (match new height) */
}

.main-content.hidden {
    opacity: 0;
    pointer-events: none;
}

.header {
    background-color: #ffffff;
    border-bottom: 0.5px solid #e8e8e8;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
}

.nav {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1rem clamp(0rem, 4vw, 3rem); /* Match page-wrapper responsive padding */
    display: flex;
    justify-content: flex-end; /* Keep links right-aligned even if brand is missing */
    align-items: center;
}

/* Wordmark on the left: title format in lowercase with fixed per-letter colours */
.nav-brand {
    display: flex;
    gap: 0.15rem;
    font-family: 'Montserrat', Arial, sans-serif;
    font-weight: 500; /* title format */
    font-size: 1.2rem;
    text-transform: lowercase;
    line-height: 1;
    margin-right: auto; /* push links to the right while keeping brand left */
    text-decoration: none; /* clickable wordmark should not underline */
    color: inherit; /* inherit nav text color */
}
/* Ensure no underline in any link state for the wordmark */
.nav-brand:link,
.nav-brand:visited,
.nav-brand:hover,
.nav-brand:active { text-decoration: none; color: inherit; }

/* Force-remove underline across browsers for clickable wordmark */
.header .nav a.nav-brand,
.header .nav a.nav-brand:link,
.header .nav a.nav-brand:visited,
.header .nav a.nav-brand:hover,
.header .nav a.nav-brand:active { text-decoration: none !important; color: inherit !important; }

.nav-letter { display: inline-block; }
.nav-letter.b { color: #87CEEB; }      /* light blue */
.nav-letter.a { color: #4682B4; }      /* steel blue */
.nav-letter.r { color: #1E90FF; }      /* dodger blue */
.nav-letter.k { color: #000080; }      /* navy */
.nav-letter.l { color: #DC143C; }      /* crimson */
.nav-letter.e { color: #FF4500; }      /* orange red */
.nav-letter.y { color: #FF8C00; }      /* dark orange */

/* Inline logo coloring inside body copy should not appear bold */
.data-column.right-column strong.logo-colored { font-weight: 700; }

.nav-links {
    display: flex;
    list-style: none;
    gap: 2rem;
}

.nav-links a {
    text-decoration: none;
    color: #666;
    font-family: 'Montserrat', Arial, sans-serif;
    font-weight: 500;
    transition: color 0.3s ease;
}

.nav-links a:hover {
    color: #333;
}

.main {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;
}

.hero-section {
    text-align: center;
    padding: 4rem 0;
}

.hero-section h1 {
    font-size: 3rem;
    margin-bottom: 1rem;
    color: #333;
}

.hero-section p {
    font-size: 1.2rem;
    color: #666;
}

/* Page-specific styles */
.page-hero {
    text-align: center;
    padding: 4rem 0 2rem;
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    margin: -2rem -2rem 2rem -2rem;
}

.page-hero h1 {
    font-size: 2.5rem;
    margin-bottom: 1rem;
    color: #333;
}

.page-hero p {
    font-size: 1.1rem;
    color: #666;
}

.content-section {
    margin-bottom: 3rem;
}

.content-section h2 {
    font-size: 2rem;
    margin-bottom: 1rem;
    color: #333;
}

.content-section p {
    font-size: 1.1rem;
    line-height: 1.6;
    color: #666;
    margin-bottom: 1rem;
}

/* Active navigation link */
.nav-links a.active {
    color: #333;
    font-weight: 600;
    position: relative;
}

.nav-links a.active::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(45deg, #FFB3BA, #BAE1FF, #C9BAFF);
}

/* Responsive Design */
@media (max-width: 768px) {
    .hero-text {
        font-size: 2.5rem;
    }
    
    .nav {
        flex-direction: column;
        gap: 1rem;
    }
    .nav-brand { align-self: flex-start; }
    
    .nav-links {
        gap: 1rem;
    }
    
    .hero-section h1 {
        font-size: 2rem;
    }
    
    .page-hero {
        margin: -2rem -1rem 2rem -1rem;
        padding: 3rem 1rem 2rem;
    }
    
    .page-hero h1 {
        font-size: 2rem;
    }
}

@media (max-width: 480px) {
    .hero-text {
        font-size: 2rem;
    }
    
    .nav-links {
        flex-wrap: wrap;
        justify-content: center;
    }
    
    .page-hero h1 {
        font-size: 1.8rem;
    }
}

/* Data Section Styles */
    .data-section {
        padding: 0 clamp(0rem, 3.6vw, 2.7rem) 4rem clamp(0rem, 3.6vw, 2.7rem); /* Responsive horizontal padding - 10% reduction */
        max-width: 1210px; /* Max width for the inner content of the data section - 21% total increase */
        margin: 0 auto; /* Center the data section within the main-content's flow */
    }

/* Subtle blink for final period after Barkley */
.blink-dot {
    display: inline-block;
    animation: blinkFade 2.8s ease-in-out infinite;
}

@keyframes blinkFade {
    0%, 20% { opacity: 0; }
    30%, 70% { opacity: 1; }
    80%, 100% { opacity: 0; }
    }

.data-section h2 {
    font-size: 2.5rem;
    font-weight: 300;
    color: #333;
    margin-bottom: 2rem;
    letter-spacing: 0.1em;
    text-align: left;
}

.data-columns {
    display: flex;
    gap: 3rem;
    align-items: stretch;
}

.data-column {
    display: flex;
    flex-direction: column;
}

.data-column.left-column {
    flex: 1;
}

.data-column.right-column {
    flex: 1;
}

.data-column p {
    font-size: 1.1rem;
    line-height: 1.6;
    color: #666;
    margin-bottom: 1.5rem;
    font-family: 'Montserrat', Arial, sans-serif;
}

/* Responsive Hero Text Scaling */
@media (max-width: 480px) {
    .hero-text {
        font-size: 5rem; /* Larger on very small screens */
    }
}

@media (min-width: 481px) and (max-width: 768px) {
    .hero-text {
        font-size: 7rem; /* Medium size for small tablets */
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .hero-text {
        font-size: 10rem; /* Large size for tablets */
    }
}

@media (min-width: 1025px) {
    .hero-text {
        font-size: 13.5rem; /* Full size for desktop */
    }
}

/* Responsive Design for Data Section */
@media (max-width: 768px) {
    .data-columns {
        flex-direction: column;
        gap: 1.5rem;
    }
    .data-section h2 {
        font-size: 2rem;
    }
    .data-column p {
        font-size: 1rem;
    }
}

/* Grey Navigation Section */
.grey-nav-section {
    background-color: #F8F8F8;
    padding: 3rem 0;
    margin-top: 2rem;
}

    .grey-nav-container {
        max-width: 1210px; /* Match Knowledge section max-width - 21% total increase */
        margin: 0 auto; /* Center the container */
        padding: 0 clamp(0rem, 3.6vw, 2.7rem) 0 clamp(2.0625rem, calc(3.6vw + 2.0625rem), 5.0625rem); /* Extra 33px left padding - adjusted for 1210px width */
    }

    /* Removed special-case first row rule now that Capabilities moved out of footer */

.nav-columns {
    display: flex;
    gap: 4rem;
}

.nav-column h3 {
    font-size: 1.2rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 1.5rem;
    font-family: 'Montserrat', Arial, sans-serif;
}

.nav-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.nav-list li {
    margin-bottom: 0.8rem;
}

.nav-list a {
    color: #333;
    text-decoration: none;
    font-size: 1rem;
    font-weight: 400;
    transition: color 0.3s ease;
}

.nav-list a:hover {
    color: #666;
}

/* Capabilities Section */
.capabilities-links {
    display: flex;
    gap: 2rem;
    flex-wrap: wrap;
    overflow-x: visible;
}

.data-column.left-column h3 {
    margin-bottom: 1.5rem; /* Align spacing with Site Map title */
}

.capabilities-links a {
    color: #333;
    text-decoration: none;
    font-size: 1rem;
    font-weight: 400;
    transition: color 0.3s ease;
    white-space: nowrap;
    flex-shrink: 0;
}

.capabilities-links a:hover {
    color: #666;
}

.plus-icon {
    font-size: 1.2rem;
    font-weight: 300;
    color: #666;
}

/* Site Map Section */
.site-map-section {
    margin-top: 2rem; /* Align border-top with disclaimer-section */
    padding-top: 2rem;
    border-top: 1px solid #E0E0E0;
}

.site-map-section h3 {
    font-size: 1.2rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 1.5rem;
    font-family: 'Montserrat', Arial, sans-serif;
}

.site-map-links {
    display: flex;
    gap: 1rem; /* reduced horizontal gap by 50% */
    flex-wrap: wrap;
}

.site-map-links a {
    color: #333;
    text-decoration: none;
    font-size: 1rem;
    font-weight: 400;
    transition: color 0.3s ease;
    font-family: 'Montserrat', Arial, sans-serif; /* match disclaimer font */
}

    .site-map-links a:hover {
        color: #666;
    }

    /* Disclaimer Section */
    .disclaimer-section {
        margin-top: 2rem;
        padding-top: 2rem;
        border-top: 1px solid #E0E0E0;
        text-align: right;
    }

    .disclaimer-section p {
        font-size: 0.9rem;
        color: #888;
        margin-bottom: 0.5rem;
        line-height: 1.4;
    }

    .disclaimer-section a {
        color: #888;
        text-decoration: none;
        transition: color 0.3s ease;
    }

    .disclaimer-section a:hover {
        color: #666;
    }

/* Resources section (align with inner pages) */
.resources-section h3 {
    font-size: 1.6rem;
    font-weight: 300;
    letter-spacing: 0.1em;
    margin-bottom: 1rem;
}
.resources-section.data-section {
    /* Match left padding used by Site Map container for perfect alignment */
    padding-left: clamp(2.0625rem, calc(3.6vw + 2.0625rem), 5.0625rem);
}
.resources-links {
    display: flex;            /* match Site Map: horizontal, wrapping */
    flex-direction: row;
    flex-wrap: wrap;
    gap: 2rem;
}
.resources-links a {
    font-weight: 400;
    text-decoration: underline;
    text-decoration-color: #CFCFCF;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
    color: #333;
    font-size: 0.9rem; /* 10% smaller than typical 1rem links */
    font-family: 'Montserrat', Arial, sans-serif; /* lock to body font */
    }

/* Responsive Design for Grey Navigation */
@media (max-width: 768px) {
    .nav-columns {
        flex-direction: column;
        gap: 2rem;
    }
    
    .site-map-links {
        flex-direction: column;
        gap: 1rem;
    }

    /* Align Capabilities mobile behavior to Site Map */
    .capabilities-links {
        flex-direction: column;
        gap: 1rem;
    }
}

/* Inner Page Template Styles */
.inner-hero {
  position: relative;
  min-height: min(60vh, 680px);
  padding: clamp(2rem, 5vw, 4rem) clamp(0rem, 3.6vw, 2.7rem);
  background-image: url('animations/test_balloon_background_pic.png');
  background-size: cover;
  background-position: center;
}

.inner-balloons {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
}

#inner-balloons-svg {
  width: 100%;
  height: 100%;
  display: block;
}

.inner-hero-content {
  position: relative;
  z-index: 10;
  max-width: 1100px;
  margin: 0 auto;
  color: #333;
}

.inner-hero-content h1 {
  font-family: 'Montserrat', Arial, sans-serif;
  font-weight: 300;
  font-size: clamp(2.2rem, 6vw, 4rem);
  margin: 0 0 1rem 0;
}

.inner-hero-content p {
  font-size: 1.1rem;
  line-height: 1.6;
  color: #555;
}

.blue-section {
  background-color: #0E5AA7;
  color: #fff;
  padding: 3rem clamp(0rem, 3.6vw, 2.7rem);
}

.blue-section .content-row {
  max-width: 1210px;
  margin: 0 auto;
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.blue-section .content-col h2 {
  font-weight: 400;
  margin: 0 0 0.75rem 0;
}

@media (max-width: 768px) {
  .blue-section .content-row {
    grid-template-columns: 1fr;
  }
}

/* Section 2 bubbles overlay */
.section2-bubbles {
  position: relative;
}
.section2-bubbles .section2-bubbles-overlay {
  position: absolute;
  inset: 0;
  z-index: 1; /* behind text columns if text uses higher z */
  pointer-events: none;
}
.section2-bubbles .content-row,
.section2-bubbles .content-col { position: relative; z-index: 2; }

#section2-bubbles-svg { width: 100%; height: 100%; display: block; }