section:has(.hero-bg){
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
    scroll-margin-top: 6rem;
  }
  @media (min-width: 640px){
    section:has(.hero-bg){ padding-top: 1.75rem; padding-bottom: 1.5rem; }
  }
  /* same .hero-bg overrides as above */
  .hero-bg{ padding-block: 1.25rem 1rem; padding-inline: 1.25rem; }
  @media (min-width: 640px){ .hero-bg{ padding-block: 1.5rem 1.25rem; padding-inline: 2rem; } }
  @media (min-width: 768px){ .hero-bg{ padding-block: 1.75rem 1.25rem; padding-inline: 3rem; } }


  /* Matches paragraphs with both classes */
  p.text-lg.text-muted-light {
    text-align: justify;
    text-justify: inter-word;
    hyphens: auto;
    -webkit-hyphens: auto;
  }
  /* Dark mode uses different color class, so also cover that case */
  .dark p.text-lg.dark\:text-muted-dark {
    text-align: justify;
    text-justify: inter-word;
    hyphens: auto;
  }

  ../about/-copy { max-width: 60ch; }  /* ~60 characters per line is comfy */





  /* Tighten top & bottom padding */
  #what-we-do {
    padding-top: 1.5rem;       /* was 4–5rem via py-16/sm:py-20 */
    padding-bottom: 1.75rem;
    scroll-margin-top: 6rem;   /* nicer anchor jump under sticky header */
  }
  @media (min-width: 640px) {
    #what-we-do {
      padding-top: 2rem;
      padding-bottom: 2rem;
    }
  }

  /* Reduce inner vertical gaps */
  #what-we-do p.mt-4 {         /* paragraph under the heading */
    margin-top: 0.75rem !important;
  }
  #what-we-do .mt-12 {         /* grid spacer */
    margin-top: 1.25rem !important;  /* was 3rem */
  }



  /* Pull section closer to the header and trim bottom space */
  #what-we-do {
    padding-top: 1.5rem;      /* tighter than py-16/sm:py-20 */
    padding-bottom: 1.75rem;
    scroll-margin-top: 6rem;
  }
  @media (min-width: 640px) {
    #what-we-do { padding-top: 2rem; padding-bottom: 2rem; }
  }
  #what-we-do .mt-10 { margin-top: 1.25rem !important; }

  /* Blue card palettes (light & dark) */
  .card-blue { border: 1px solid rgba(44,95,246,.15); }
  .card-blue-1 { background: #eef4ff; }   /* light indigo */
  .card-blue-2 { background: #e8f0ff; }   /* soft azure */
  .card-blue-3 { background: #e3ecff; }   /* pale cornflower */
  .card-blue-4 { background: #dde7ff; }   /* pastel blue */
  .card-blue-5 { background: #d7e2ff; }   /* light periwinkle */
  .card-blue-6 { background: #d1ddff; }   /* light slate blue */

  /* Dark mode counterparts */
  .dark .card-blue-1 { background: #0d1b3a; }
  .dark .card-blue-2 { background: #0b1834; }
  .dark .card-blue-3 { background: #0a162f; }
  .dark .card-blue-4 { background: #09142b; }
  .dark .card-blue-5 { background: #081227; }
  .dark .card-blue-6 { background: #071023; }

  /* Make text legible on dark blue chips */
  .dark .card-blue h4,
  .dark .card-blue p { color: #f5f6f8; }





  /* Remove any default margins around sections (safety) */
  section { margin: 0; }

  /* Compact spacing for the two sections */
  #process,
  #why-us {
    padding-top: 1rem;      /* tighter than py-16/sm:py-20 */
    padding-bottom: 1rem;
    scroll-margin-top: 6rem; /* better anchor jump under sticky header */
  }
  @media (min-width: 640px) {
    #process,
    #why-us {
      padding-top: 2.25rem;
      padding-bottom: 2.25rem;
    }
  }

  /* Reduce inner vertical gaps */
  #process p.mt-4 {            /* subtitle under the heading */
    margin-top: 0.5rem !important;
  }
  #process .mt-10,             /* spacer before the grid list */
  #why-us .mt-10 {             /* spacer before the 4-card grid */
    margin-top: 0.75rem !important;
  }

  /* Tighten grid/list spacing */
  #process ol { gap: 0.75rem; }              /* was gap-6 (~1.5rem) */
  #why-us .grid { gap: 0.75rem; }            /* was gap-6 */

  /* Optional: make the cards a bit denser too */
  #process li,
  #why-us .rounded-xl {
    padding: 0.9rem 1rem;      /* was p-6 */
  }

  /* If a section follows immediately, don’t add extra space between them */
  #process + section,
  #why-us + section {
    margin-top: 0 !important;
  }






  #team {
    padding-top: 1.25rem;      /* was 4–5rem via py-16/sm:py-20 */
    padding-bottom: 1.25rem;
    scroll-margin-top: 6rem;   /* nicer anchor jump under sticky header */
  }
  @media (min-width: 640px) {
    #team { padding-top: 1.5rem; padding-bottom: 1.5rem; }
  }

  /* Reduce inner vertical gaps */
  #team p.mt-4 {               /* paragraph under (optional) heading */
    margin-top: 0.5rem !important;
  }
  #team .mt-12 {               /* grid spacer */
    margin-top: 1rem !important;   /* was 3rem */
  }

  /* Optional: make the grid/cards a touch denser */
  #team .grid { gap: 0.75rem; }    /* was gap-6 (~1.5rem) */
  #team article { padding: 0.9rem 1rem; }  /* was p-6 */





/* Hide Contact on mobile, show Theme */
@media (max-width: 767.98px) {
  a[href="../contact/"] {
    display: none !important;
  }
  #themeToggle {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
  }
}

/* Desktop/tablet: show Theme (and restore Contact, just in case) */
@media (min-width: 768px) {
  a[href="../contact/"] {
    display: inline-flex !important;
  }
  #themeToggle {
    display: inline-flex !important; /* override Tailwind's hidden */
    align-items: center;
    justify-content: center;
  }
}





/* Base color so the hamburger is visible */
#menuBtn {
  color: #0f172a;              /* dark slate (icon color) */
  background: rgba(15, 23, 42, 0.06);
  border: 1px solid rgba(15, 23, 42, 0.12);
}

/* Dark mode variant (if you use a .dark class on <html> or <body>) */
.dark #menuBtn {
  color: #f8fafc;              /* near-white */
  background: rgba(148, 163, 184, 0.10);
  border-color: rgba(148, 163, 184, 0.25);
}

/* Hover / active feedback */
#menuBtn:hover {
  background: rgba(15, 23, 42, 0.12);
}
.dark #menuBtn:hover {
  background: rgba(148, 163, 184, 0.18);
}

/* Focus ring without Tailwind (fallback) */
#menuBtn:focus-visible {
  outline: 2px solid #6366f1;  /* indigo */
  outline-offset: 2px;
  border-color: #6366f1;
}

/* Optional: ensure it's above bg overlays if any */
#menuBtn { z-index: 20; }


#menuBtn { color: #0f172a; }        /* dark slate on light */
.dark #menuBtn { color: #f8fafc; }  /* near-white on dark */




/* ===== Mobile footer grid (apply after Tailwind) ===== */
@media (max-width: 639.98px) {
  /* Make the main footer grid 2 columns on mobile */
  footer .grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px !important; /* a bit tighter */
    align-items: start;
  }

  /* Brand block spans full width on the first row */
  footer .grid > div:first-child {
    grid-column: 1 / -1 !important;
    text-align: center;
  }

  /* Center headings + lists for all columns */
  footer .grid > div h4 {
    text-align: center;
    margin-bottom: 6px;
  }
  footer .grid > div ul {
    margin-top: 6px !important;
    text-align: center;
  }
  footer .grid > div ul li {
    margin: 6px 0 !important;
  }

  /* Center social icons row */
  footer .grid > div .flex.gap-3 {
    justify-content: center;
  }

  /* Slightly reduce paddings in the container */
  footer .mx-auto {
    padding-left: 16px !important;
    padding-right: 16px !important;
    padding-top: 16px !important;
    padding-bottom: 16px !important;
  }

  /* Tighten the copyright strip */
  footer .border-t.pt-6 {
    padding-top: 10px !important;
  }
}

/* Optional: smaller social icons on very small screens */
@media (max-width: 380px) {
  footer .size-9 {
    width: 34px !important;
    height: 34px !important;
  }
  footer .h-5.w-5 {
    width: 18px !important;
    height: 18px !important;
  }
  
}


/* Center the brand row on mobile */
@media (max-width: 639.98px) {
  footer .grid > div:first-child > .flex.items-center {
    justify-content: center !important; /* center the logo + text */
  }
  /* optional: ensure the block spans full width + centers text */
  footer .grid > div:first-child {
    grid-column: 1 / -1 !important;
    text-align: center;
  }
}


/* Center the FOLLOW column on small screens */
@media (max-width: 639.98px) {
  /* The Follow column is the last item in your footer grid */
  footer .grid > div:last-child {
    grid-column: 1 / -1;     /* span full width */
    text-align: center;       /* center the heading */
  }
  footer .grid > div:last-child .mt-3.flex {
    justify-content: center;  /* center the social icons row */
  }
}




/* Mobile: make "At a Glance" list a 2-column grid and center content */
@media (max-width: 639.98px) {
  /* target any card where a <ul> directly follows the <h3> */
  .rounded-2xl > h3 + ul {
    display: grid !important;                /* override Tailwind's existing grid classes if needed */
    grid-template-columns: repeat(2, 1fr);   /* 2 columns on mobile */
    gap: 0.75rem !important;                 /* tighten spacing */
    justify-items: center;                   /* center each cell's content */
  }

  /* center the card title */
  .rounded-2xl > h3 {
    text-align: center;
  }

  /* center each list item’s text and make them fill their cell nicely */
  .rounded-2xl > h3 + ul li {
    text-align: center;
    width: 100%;
    display: block;
    padding: 0.75rem;                        /* ensure nice tappable area */
  }
}



/* Mobile: make the process steps a 2-column centered grid */
@media (max-width: 639.98px) {
  #process ol {
    display: grid !important;                  /* ensure grid on mobile */
    grid-template-columns: repeat(2, 1fr);     /* 2 columns */
    gap: 0.75rem !important;                   /* tighter gaps */
    justify-items: center;                     /* center cards in cells */
  }

  #process ol li {
    text-align: center;                        /* center text in each card */
    padding: 0.875rem !important;              /* comfy tap target */
    width: 100%;
  }

  /* Optional: tighten spacing above the grid on mobile */
  #process .mt-10 {
    margin-top: 0.75rem !important;
  }
}