/* ===== FULL-BLEED MODE FOR THIS PAGE (classes: full-bleed) ===== */
/* Remove Minimal Mistakes' centered max-width on the article and inner wrappers */
.site-logo img { height: 40px; width: auto; } 
.page.full-bleed,
.page.h-entry.full-bleed {
  width: 100% !important;
}
---
# Only the main Sass file needs front matter
---

@import "minimal-mistakes/skins/air";    // or your chosen skin
@import "minimal-mistakes";              // theme
@import "custom/custom";                 // your overrides in _sass/custom/_custom.scss


.page.full-bleed .page__inner-wrap,
.page.full-bleed .page__content,
.page.full-bleed .archive {
  max-width: 100% !important;
  width: 100% !important;
  margin: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Make the hero band edge-to-edge */
.page.full-bleed .page__content .hero-band {
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  width: 100vw !important;
}

/* ===== RESPONSIVE, FULL-WIDTH GRID ===== */
.page .page__inner-wrap .page__content .grid4 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); /* fluid by device */
  gap: 18px;
  margin: 1rem auto 2rem;
  padding-left: clamp(16px, 3vw, 32px);
  padding-right: clamp(16px, 3vw, 32px);
}

/* ===== HERO + CARD STYLES ===== */
.page .page__inner-wrap .page__content .hero-band {
  background: #305890 !important; /* updated */
  color: #fff !important;
  text-align: center;
  padding: 2.5rem 1rem;
}
.page .page__inner-wrap .page__content .hero-band h1 {
  margin: 0;
  font-size: clamp(1.8rem, 3.5vw, 2.4rem);
  font-weight: 800;
}

.page .page__inner-wrap .page__content .card {
  background: #f3f6fb;
  border-radius: 12px;
  padding: 14px 14px 10px;
  border: 1px solid #d7dfef;
  min-height: 320px;
}
.page .page__inner-wrap .page__content .card h3 {
  margin: 0 0 8px;
  color: #305890; /* updated */
  font-weight: 800;
  font-size: 1.05rem;
}
.page .page__inner-wrap .page__content .card p,
.page .page__inner-wrap .page__content .card li { font-size: 0.98rem; }
.page .page__inner-wrap .page__content .card ul { margin: 0 0 0 1.1rem; }

/* badges — render as plain blue text (no pill/box) */
.page .page__inner-wrap .page__content .badge {
  background: transparent !important;
  color: #305890 !important;  /* updated */
  padding: 0 !important;
  border-radius: 0 !important;
  font-size: 1em;
  font-weight: 800;
  box-shadow: none !important;
}

/* Optional section-title utility */
.page .page__inner-wrap .page__content .section-title {
  font-size: 1.05rem;
  margin-top: 0.5rem;
  font-weight: 700;
  color: #305890; /* updated */
}

/* One consistent style for the entire subhead line */
.subhead{
  text-align:center;
  margin:1.25rem auto .25rem;
  font-weight:800;
  font-size:clamp(1.2rem, 2.5vw, 1.5rem);
  line-height:1.3;
  color:#305890; /* updated */
}

/* Ensure every child matches the parent size/weight and has no pill look */
.subhead *{
  font-size:1em !important;        /* same size as .subhead */
  font-weight:inherit !important;   /* same weight as .subhead */
  color:inherit !important;         /* same color as .subhead */
  background:transparent !important;
  padding:0 !important;
  border-radius:0 !important;
  text-decoration:none !important;
  box-shadow:none !important;
}
/* Make nav items bolder and keep them on one line on wide screens */
.masthead__menu-item a { font-weight: 600; }

/* Slightly tighten vertical space under the masthead */
.masthead { border-bottom: 1px solid #2a2a2a10; }

/* Optional: ensure the site title/logo area feels like the screenshot */
.site-title, .site-title a { font-weight: 800; color: #111; }

/* Keep all top-level tabs visible on wider screens */
@media (min-width: 960px) {
  /* Slightly smaller font and tighter padding */
  .greedy-nav a,
  .masthead__menu-item a {
    font-size: 15px;               /* ↓ from 16px */
    padding: 6px 8px;              /* tighter left/right */
    font-weight: 600;
    white-space: nowrap;
  }

  /* Reduce gaps between items */
  .greedy-nav .visible-links > li {
    margin: 0 6px !important;
  }

  /* Give the links more real estate by trimming the left side area */
  .masthead__inner-wrap {
    padding-left: 10px;
    padding-right: 12px;
  }

  /* Ensure the nav uses the full header width */
  .greedy-nav {
    max-width: 100% !important;
  }

  /* Keep the toggle button but make it the LAST resort */
  .greedy-nav__toggle {
    padding: 4px 6px;
  }
}

/* If it still collapses at your screen width, use a slightly stronger squeeze */
@media (min-width: 1100px) {
  .greedy-nav a,
  .masthead__menu-item a { font-size: 14.5px; padding: 6px 7px; }
  .greedy-nav .visible-links > li { margin: 0 5px !important; }
  .site-logo img { height: 36px; }
}

/* --- Show & style the brand text (CrowdByte Solutions Inc.) --- */
.site-title { display: block !important; margin-right: 12px; }
.site-title a {
  font-weight: 800;
  color: #111;                /* same feel as screenshot */
  text-decoration: none;
  font-size: clamp(18px, 2vw, 22px);  /* bigger but responsive */
  line-height: 1.1;
}

/* If you also keep a logo, keep it compact so tabs don't overflow */
.site-logo img { height: 32px; width: auto; }  /* try 32–38px; smaller leaves room */

/* --- Make the masthead use space efficiently --- */
.masthead__inner-wrap { padding-left: 10px; padding-right: 12px; }
.greedy-nav { max-width: 100% !important; }

/* --- Navigation: slightly larger text but compact spacing (avoid “…” collapse) --- */
@media (min-width: 960px) {
  .greedy-nav a,
  .masthead__menu-item a {
    font-size: 16.5px;        /* a touch larger */
    line-height: 1.25;
    padding: 6px 9px;         /* compact horizontal padding keeps all tabs visible */
    font-weight: 650;
    white-space: nowrap;
  }
  .greedy-nav .visible-links > li { margin: 0 6px !important; }
  .greedy-nav__toggle { padding: 4px 6px; }
}

/* Safety squeeze for the tight 1024–1140px window so nothing collapses */
@media (min-width: 1024px) and (max-width: 1140px) {
  .greedy-nav a,
  .masthead__menu-item a { font-size: 16px; padding: 6px 8px; }
  .greedy-nav .visible-links > li { margin: 0 5px !important; }
  .site-logo img { height: 30px; }   /* trims a bit more if a logo is present */
}
/* Desktop: make the tagline full-bleed and single-line */
@media (min-width: 1200px) {
  .tagline{
    /* pull out of the centered wrapper to span the viewport */
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    width: 100vw !important;
    max-width: 100vw !important;

    white-space: nowrap;        /* keep it on one line */
    text-align: center;
    padding-left: clamp(16px, 3vw, 32px);
    padding-right: clamp(16px, 3vw, 32px);

    /* scale so it fits across without wrapping */
    font-size: clamp(15px, 1.4vw, 20px);
    line-height: 1.3;
  }
}

/* Keep your existing mobile/tablet styling below 1200px */
@media (max-width: 1199px) {
  .tagline{
    max-width: none;
    margin: .5rem auto 1.25rem;
    text-align: center;
    font-size: 1.05rem;
    line-height: 1.4;
    padding-left: clamp(16px, 3vw, 32px);
    padding-right: clamp(16px, 3vw, 32px);
  }
}
/* Center everything on the Contact page */
.page.contact-page .page__content{
  display: flex;
  flex-direction: column;
  align-items: center;   /* <-- centers children horizontally */
}

/* Keep hero text area centered and not too wide */
.page.contact-page .contact-hero{
  width: min(1000px, calc(100% - 48px));
  margin-left: auto;
  margin-right: auto;
}

/* Form card centered with a sensible max width */
.page.contact-page .contact-card{
  width: min(980px, calc(100% - 48px));
  margin-left: auto;
  margin-right: auto;
}

/* Success message centered the same way */
.page.contact-page .contact-success{
  width: min(720px, calc(100% - 48px));
  margin-left: auto;
  margin-right: auto;
}