.navigation-wrapper {
  display: contents;
}
 
.navigation-container1 {
  display: contents;
}
 
.navigation-container2 {
  display: none;
}
 
.navigation-container3 {
  display: contents;
}
 
.navigation-container4 {
  display: none;
}
 
.navigation-container5 {
  display: contents;
}
 
.navigation-container6 {
  display: none;
}
 
.navigation-container7 {
  display: contents;
}

.footer-wrapper {
  display: contents;
}
 
.footer-container1 {
  display: contents;
}
 
.footer-container2 {
  display: none;
}
 
.footer-container3 {
  display: contents;
}
 
.footer-container4 {
  display: none;
}
 
.footer-container5 {
  display: contents;
}

.home-container1 {
  width: 100%;
  min-height: 100vh;
}
 
.home-container2 {
  display: none;
}
 
.home-container3 {
  display: contents;
}
 
.home-container4 {
  right: 50px;
  border: 1px solid #ffffff5c;
  bottom: 30px;
  display: flex;
  z-index: 22;
  position: fixed;
  box-shadow: 5px 5px 10px 0px rgba(31, 31, 31, 0.4);
  min-height: auto;
  align-items: center;
  padding-top: 8px;
  padding-left: 12px;
  border-radius: 8px;
  padding-right: 12px;
  padding-bottom: 8px;
  backdrop-filter: blur(6px);
  background-color: rgba(41, 41, 41, 0.41);
}
 
.home-icon28 {
  width: 24px;
  margin-right: 4px;
}
 
.home-text33 {
  color: white;
  font-size: 13px;
  font-style: normal;
  font-weight: 500;
  line-height: 24px;
}

.impact-numbers {
    display: none !important;
}

/* Container to hold the cards and allow them to wrap on mobile */
.team-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2rem;
  width: 100%;
  margin-top: 2rem;
}

/* Each card takes 30% width on desktop, 100% on mobile */
.team-card {
  flex: 1 1 300px; /* Grows/shrinks, but tries to stay around 300px */
  max-width: 350px;
  display: flex;
}

/* Hover grow effect for Our Team + Our Work cards.
   Applied to the card wrapper (not the box) because the page script
   sets an inline transform on .how-it-works-box that would override it. */
.team-card {
  position: relative;
  transition: transform 0.25s ease;
}

.team-card:hover {
  transform: scale(1.05);
  z-index: 5;
}

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

/* Ensure the box stretches to fill the card height */
.team-card .how-it-works-box {
  width: 100%;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* Scalable Image Container */
.team-image-container {
  width: 90%; /* Scales based on the size of the bubble */
  max-width: 200px; /* Prevents it from getting huge on big screens */
  margin-bottom: 1.5rem;
  position: relative;
  z-index: 2;
}

.team-img {
  width: 100%;
  aspect-ratio: 1 / 1; /* Keeps it a perfect square/circle */
  object-fit: cover;
  border-radius: 20px; /* Rounded corners */
  border: 2px solid var(--color-on-surface);
}

/* Hide original arrows and numbers from the source layout */
.how-it-works-arrow, .how-it-works-number {
  display: none !important;
}

/* --- Our Work Section --- */

.our-work-section {
  padding: var(--spacing-4xl) var(--spacing-xl);
  background-color: var(--color-surface);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.our-work-title {
  text-align: center;
  margin-bottom: var(--spacing-md);
}

/* Rectangular photo that matches the team photo styling */
.our-work-img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 20px;
  border: 2px solid var(--color-on-surface);
  margin-bottom: 1.5rem;
  position: relative;
  z-index: 2;
}

/* --- Fix for the white line and section spacing --- */

/* --- Fix for the white line and setting the background to Teal --- */

/* --- Valley Fever Section: Lighter Teal Background --- */
/* --- Duplicate of Our Mission Style --- */
/* --- Styling for the Valley Fever Section --- */

/* --- Lighter Teal Section Background --- */
.what-is-vf-section {
  background-color: var(--color-surface-elevated); /* Lighter teal theme color */
  padding: var(--dl-layout-space-threeunits) 0;
  margin-top: -1px; /* Removes the white gap line */
}

/* --- The Solid Teal Box (The "Shadow" box) --- */
.vf-teal-backplate {
  background-color: var(--color-secondary) !important; /* Darker solid teal */
  padding: 0 !important;
  border: none !important;
  box-shadow: none !important;
  /* Adjusting position to look like the Mission section backplate */
  display: flex;
  align-items: stretch;
  justify-content: stretch;
}

/* --- Ensuring the White Paper Box sits correctly inside --- */
.vf-teal-backplate .mission-values-card {
  margin: 10px; /* Creates the border look of the teal box underneath */
  width: 100%;
  background-color: var(--color-surface); /* White background */
}

/* --- Centering the Button --- */
.vf-button-wrapper {
  display: flex;
  justify-content: center;
  margin-top: var(--spacing-2xl);
}

/* Fix for seamless transition to the mission section */
#mission {
  margin-top: -1px;
}


.nav-blog-wrapper {
  margin-left: auto; /* A backup to ensure it stays right */
}

.blog-button {
  display: flex;
  align-items: center;
  gap: 10px;
  background-color: var(--color-secondary); /* Your brand teal */
  color: white;
  padding: 10px 20px;
  border-radius: var(--border-radius-card);
  text-decoration: none;
  font-family: var(--font-family-heading);
  font-weight: 600;
  transition: all 0.2s ease-in-out;
  /* That offset "box shadow" look you like */
  box-shadow: 4px 4px 0px rgba(26, 165, 142, 0.3); 
}

.blog-button:hover {
  transform: translateY(-2px);
  box-shadow: 6px 6px 0px rgba(26, 165, 142, 0.4);
}



/* Blog Page Grid Background */
/* index.css */
.blog-page-body {
  margin: 0;
  background-color: var(--color-surface);
  background-image: 
    linear-gradient(var(--grid-color) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-color) 1px, transparent 1px);
  background-size: var(--grid-size) var(--grid-size);
  
  /* Add these two lines for a perfect match */
  background-position: center top; 
  background-attachment: fixed; 
}
.blog-header {
  border-bottom: 1px solid var(--grid-color); /* Optional: a nice separator */
  margin: 0;
  padding: 40px 20px;
}

.blog-feed-container {
  max-width: 800px;
  margin: 0 auto;
  padding-bottom: var(--spacing-4xl);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3xl);
}

/* Yellow Offset Box Effect */
.blog-post-card {
  position: relative;
  width: 100%;
}

.blog-yellow-backplate {
  position: absolute;
  top: 12px;
  left: 12px;
  width: 100%;
  height: 100%;
  background-color: var(--color-accent); /* The yellow from snapshots */
  border-radius: var(--border-radius-lg);
  z-index: 1;
}

.blog-post-inner {
  position: relative;
  z-index: 2;
  background: white;
  border: 2px solid var(--color-on-surface);
  border-radius: var(--border-radius-lg);
  padding: var(--spacing-xl);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.blog-category {
  font-family: var(--font-family-heading);
  font-weight: 800;
  color: var(--color-primary);
  text-transform: uppercase;
  font-size: var(--font-size-xs);
}

.blog-post-title {
  font-family: var(--font-family-heading); /* Baloo 2 */
  font-size: var(--font-size-2xl);
  color: var(--color-on-surface);
}

/* =====================================================================
   POLISH PASS: cleaner layout, calmer motion, consistent cards
   Keeps the notebook / graph-paper look, offset shadows, and brand
   colors, but removes the tilt and visual noise.
   ===================================================================== */

/* ---- Base ---- */
::selection {
  background: color-mix(in srgb, var(--color-accent) 60%, transparent);
}

:focus-visible {
  outline: 3px solid var(--color-secondary);
  outline-offset: 3px;
}

/* Keep anchored sections from hiding under the sticky nav */
section[id] {
  scroll-margin-top: 5rem;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* ---- Navigation: solid and quiet instead of a full grid ---- */
.navigation-root {
  background-image: none;
  background-color: color-mix(in srgb, var(--color-surface) 92%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--color-border);
  box-shadow: 0 1px 12px rgba(9, 18, 26, 0.06);
  padding: 0.6rem 2rem;
}

/* ---- Buttons: neutral shadow (the default was pinkish on every color) ---- */
.btn {
  box-shadow: 0 2px 6px rgba(9, 18, 26, 0.12);
}

.btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(9, 18, 26, 0.16);
}

.btn:active:not(:disabled) {
  transform: translateY(0);
}

/* ---- Hero ---- */
.handwritten-welcome-overlay {
  background: color-mix(in oklab, #000000 55%, transparent);
}

.handwritten-welcome-content {
  transform: none;
}

.handwritten-welcome-paper {
  padding: clamp(2rem, 5vw, 4rem);
  box-shadow: 12px 12px 0px var(--color-primary);
}

.handwritten-welcome-graph {
  opacity: 0.08;
}

.handwritten-welcome-badge {
  transform: none;
}

.handwritten-welcome-mission {
  font-size: var(--font-size-xl);
}

.handwritten-welcome-snapshot {
  margin-bottom: var(--spacing-2xl);
}

.handwritten-welcome-actions {
  flex-wrap: wrap;
  gap: var(--spacing-lg);
}

.handwritten-welcome-actions .btn {
  min-width: 10rem;
}

/* ---- Section rhythm: backgrounds alternate, padding is consistent ---- */
.mission-values,
.program-snapshot,
.how-it-works,
.founder-note,
.our-work-section {
  padding-top: clamp(3.5rem, 7vw, 5.5rem);
  padding-bottom: clamp(3.5rem, 7vw, 5.5rem);
}

#valley-fever-info { background-color: var(--color-surface-elevated); }
#mission           { background-color: var(--color-surface); }
.program-snapshot  { background-color: var(--color-surface-elevated); }
#team              { background-color: var(--color-surface); }
.founder-note      { background-color: var(--color-surface-elevated); }
.our-work-section  { background-color: var(--color-surface); }

/* ---- Feature cards: straight, same border, same offset shadow ---- */
.mission-values-card,
.founder-note-card {
  transform: none;
  border: 2px solid var(--color-on-surface);
  border-radius: var(--border-radius-md);
  box-shadow: 8px 8px 0px color-mix(in srgb, var(--color-secondary) 45%, transparent);
}

.mission-values-graph {
  opacity: 0.06;
}

.founder-note-graph {
  opacity: 0.08;
}

.mission-values-heading {
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}

.program-snapshot-paper {
  box-shadow: 0 8px 24px rgba(9, 18, 26, 0.08);
  border-left-width: 8px;
}

.program-snapshot-graph {
  opacity: 0.12;
}

.program-snapshot-item:hover {
  transform: translateX(6px);
}

.founder-note-body .section-content {
  line-height: 1.75;
}

/* ---- Team + Work cards ---- */
.how-it-works-title,
.our-work-title {
  margin-bottom: var(--spacing-md);
}

.team-grid {
  max-width: var(--content-max-width);
  margin-left: auto;
  margin-right: auto;
  gap: var(--spacing-2xl);
}

.team-card .how-it-works-box {
  border-radius: var(--border-radius-md);
  box-shadow: 6px 6px 0px color-mix(in srgb, var(--color-secondary) 30%, transparent);
}

.team-card:hover .how-it-works-box {
  box-shadow: 8px 8px 0px var(--color-secondary);
}

.team-img,
.our-work-img {
  border-radius: var(--border-radius-md);
}

/* Team: name stands out, role and school sit quietly underneath */
.team-card .section-subtitle {
  opacity: 1;
  font-size: var(--font-size-xl);
  margin-bottom: var(--spacing-xs);
}

.team-card .section-content {
  color: var(--color-on-surface-secondary);
  font-size: var(--font-size-sm);
}

/* Work: long copy reads better left-aligned */
.our-work-section .team-card .how-it-works-box {
  align-items: stretch;
  text-align: left;
}

.our-work-section .team-card .section-subtitle {
  font-size: var(--font-size-lg);
  opacity: 1;
  margin-bottom: var(--spacing-sm);
}

.our-work-section .team-card .section-content {
  color: var(--color-on-surface);
  font-size: var(--font-size-sm);
  line-height: 1.65;
}

/* ---- Footer ---- */
.footer-graph-overlay {
  opacity: 0.08;
}

.footer-logo-text {
  transform: none;
}

/* ---- Mobile ---- */
@media (max-width: 767px) {
  .navigation-root {
    padding: 0.5rem 1rem;
  }

  .handwritten-welcome-paper {
    box-shadow: 8px 8px 0px var(--color-primary);
  }

  .handwritten-welcome-actions {
    align-items: stretch;
  }

  .handwritten-welcome-actions a {
    display: block;
  }

  .handwritten-welcome-actions .btn {
    width: 100%;
  }

  .mission-values-body {
    grid-template-columns: 1fr;
  }

  .mission-values-card,
  .founder-note-card,
  .program-snapshot-paper {
    padding: var(--spacing-xl);
  }

  .mission-values-card,
  .founder-note-card {
    box-shadow: 6px 6px 0px color-mix(in srgb, var(--color-secondary) 45%, transparent);
  }
}


/* ---- Message section: text on the left, photo on the right ---- */
.founder-note-container {
  max-width: 960px;
}

.founder-note-content {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 17rem);
  grid-template-areas:
    "title photo"
    "body  photo";
  column-gap: var(--spacing-3xl);
  align-items: start;
}

.founder-note-title {
  grid-area: title;
}

.founder-note-body {
  grid-area: body;
}

.founder-note-photo {
  grid-area: photo;
  margin: 0;
}

.founder-note-img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border: 2px solid var(--color-on-surface);
  border-radius: var(--border-radius-md);
  box-shadow: 6px 6px 0px var(--color-accent);
}

@media (max-width: 767px) {
  .founder-note-content {
    grid-template-columns: 1fr;
    grid-template-areas:
      "title"
      "photo"
      "body";
  }

  .founder-note-photo {
    max-width: 14rem;
    margin: var(--spacing-lg) auto 0;
  }
}