.topbar.sticky {
  position: sticky;
  top: 0;
  z-index: 20;
  backdrop-filter: saturate(120%) blur(8px);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.85), rgba(250, 250, 250, 0.75));
  /* background: linear-gradient(180deg, rgba(14,18,32,0.85), rgba(11,13,18,0.75)); */
  border-bottom: 1px solid var(--border);
}
/* --- Icon utilities (Font Awesome) --- */
.icon-xs { font-size: .875rem; line-height: 1; }
.icon-sm { font-size: 1rem; line-height: 1; }
.icon-md { font-size: 1.25rem; line-height: 1; }
.icon-lg { font-size: 1.5rem; line-height: 1; }
.icon-xl { font-size: 2rem; line-height: 1; }
.icon-2xl { font-size: 2.5rem; line-height: 1; }
.icon-accent { color: var(--accent); }

.topbar { padding: .5rem 2rem; display: flex; flex-direction: column; gap: .5rem;  width: auto; }
.branding { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .75rem 0 1rem; }
.logo img, #block-nebula-onepage-site-branding img, #block-nebula-onepage-site-branding a img { height: 45px; width: auto; display: block; image-rendering: -webkit-optimize-contrast; }
.site-names { display: flex; flex-direction: column; gap: .25rem; }
.site-name { font-weight: 700; font-size: 1.125rem; color: var(--ink); }
.site-slogan { color: var(--ink-dim); font-size: .9rem; }

.nav-toggle {
  display: inline-flex; flex-direction: column; gap: 4px;
  background: transparent; border: 1px solid var(--border); padding: 8px;
  border-radius: 10px; cursor: pointer;
}
.nav-toggle__bar { width: 24px; height: 2px; background: var(--ink); display: block; }

.primary-nav { display: none; margin-top: .5rem; }
.primary-nav.is-open { display: block; }
.primary-nav .menu { list-style: none; padding: 0; margin: 0; display: flex; gap: 1rem; flex-wrap: wrap; }
.primary-nav .menu a { padding: .5rem .75rem; border-radius: 10px; border: 1px solid transparent; }
.primary-nav .menu a:hover, .primary-nav .menu a.is-active { border-color: var(--border); background: var(--card); }

.hero { background: linear-gradient(180deg, rgba(138,162,255,0.06), rgba(0,0,0,0)); border-bottom: 1px solid var(--border); }
/* .features .grid-3,  */
.showcase .grid-3, .pricing .grid-3, .prefooter .grid-3 { display: grid; gap: 1rem; grid-template-columns: 1fr; }
.about .grid-2, .testimonials .grid-2 { display: grid; gap: 1rem; grid-template-columns: 1fr; }

.footer { border-top: 1px solid var(--border); }
.region-footer-bottom { border-top: 1px solid var(--border); margin-top: 1rem; padding-top: 1rem; color: var(--ink-dim); font-size: .9rem; }

@media (min-width: 640px) {
  .features .grid-3, .pricing .grid-3, .prefooter .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .about .grid-2, .testimonials .grid-2 { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 960px) {
  .primary-nav { display: block; margin-top: 0; }
  .nav-toggle { display: none; }
  .features .grid-3, .pricing .grid-3, .prefooter .grid-3 { grid-template-columns: repeat(3, 1fr); }
}

/* --- Horizontal menu right of logo --- */
.branding {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .75rem 0 1rem;
}
.brand-left {
  display: flex;
  align-items: center;
  gap: .75rem;
  min-width: 0;
}
.brand-right {
  display: flex;
  align-items: center;
  gap: 1rem;
}

/* Primary nav: horizontal, no bullets */
.primary-nav .menu {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}
.primary-nav .menu li { list-style: none; }
.primary-nav .menu a {
  padding: .5rem .75rem;
  border-radius: 10px;
  border: 1px solid transparent;
  text-decoration: none;
  display: inline-block;
}
.primary-nav .menu a:hover,
.primary-nav .menu a.is-active {
  border-color: var(--border);
  background: var(--card);
}

/* Mobile behavior: show toggle, collapse nav */
.nav-toggle { display: inline-flex; }
.primary-nav { display: none; }
.primary-nav.is-open { display: block; position: absolute; right: 4%; top: 64px; background: linear-gradient(180deg, rgba(14,18,32,0.98), rgba(11,13,18,0.98)); border: 1px solid var(--border); border-radius: 12px; padding: .75rem; }
.primary-nav.is-open .menu { flex-direction: column; gap: .5rem; }

/* Desktop: keep nav visible inline to the right of logo; hide toggle */
@media (min-width: 960px) {
  .nav-toggle { display: none; }
  .primary-nav { display: block; position: static; }
  .primary-nav .menu { flex-direction: row; }
}

/* ----- Primary menu inside .brand-right (your exact markup) ----- */

/* Remove bullets/margins */
.brand-right nav[role="navigation"] ul,
.brand-right nav[role="navigation"] li {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Horizontal layout (top level) */
.brand-right nav[role="navigation"] > ul,
.brand-right nav[role="navigation"] .menu {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

/* Links */
.brand-right nav[role="navigation"] a {
  display: inline-block;
  padding: .5rem .75rem;
  border-radius: 10px;
  border: 1px solid transparent;
  text-decoration: none;
  color: var(--menu-link);
}
.brand-right nav[role="navigation"] a:hover,
.brand-right nav[role="navigation"] a.is-active,
.brand-right nav[role="navigation"] a[aria-current="page"] {
  font-weight: 500;
  color: var(--menu-link-active);
}

/* Mobile: collapsed by default; opens when nav gets .is-open */
.brand-right nav[role="navigation"] {
  display: none;
}
.brand-right nav[role="navigation"].is-open {
  display: block;
  position: absolute;
  right: 4%;
  top: 70px;
  background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(250,250,250,0.98));
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: .75rem 1rem;
}
.brand-right nav[role="navigation"].is-open > ul,
.brand-right nav[role="navigation"].is-open .menu {
  flex-direction: column;
  gap: .5rem;
}

/* Desktop: always visible and horizontal */
@media (min-width: 960px) {
  .nav-toggle { display: none; }
  .brand-right nav[role="navigation"] {
    display: block;
    position: static;
  }
  .brand-right nav[role="navigation"] > ul,
  .brand-right nav[role="navigation"] .menu {
    flex-direction: row;
  }
}

.views-field-field-subtitle h2 {
  font-weight: 500;
  font-size: 1.5rem;
  color: var(--subtitle);
}

.view-page-about .views-field-body p {
  line-height: 1.5rem;
}
.view-page-about .views-field-title h1 {
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}

#pillars {
    background-color: rgba(000, 000, 000, 0.2);
}

/* =========================================================
   FLEXIBLE GRID FOR GENERIC VIEW BLOCKS (cards/boxes)
   Works with:
   <div class="js-view-dom-id-XXXX">
     <div class="views-row"> ... </div>
     ...
   </div>
   ========================================================= */

/* Grid container (the dynamic js-view-dom-id wrapper) */
[class*="pillars-list"] {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: 1fr;              /* mobile: 1 column */
}

/* Tablet: 2 columns */
@media (min-width: 640px) {
  [class*="pillars-list"] {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Desktop: 4 columns by default */
@media (min-width: 960px) {
  [class*="pillars-list"] {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Desktop auto-switch to 3 columns when there are 5+ items
   (so 6 items = 2 rows of 3). Modern :has() selector. */
@media (min-width: 960px) {
  [class*="pillars-list"]:has(> .views-row:nth-child(5)) {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Optional manual override:
   In the View (Advanced → CSS class), add "grid-3-desktop"
   to force 3 columns on desktop regardless of count. */
@media (min-width: 960px) {
  .grid-3-desktop[class*="pillars-list"] {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 960px) {
  .grid-4-desktop[class*="services-list"] {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* -------------------- Box styling -------------------- */
.service-list .views-row {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: .5rem;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
  min-width: 0; /* prevent overflow */
  grid-template-columns: repeat(2, 1fr);
}

.service-list .views-row:hover {
  border-color: var(--accent);
  box-shadow: 0 12px 30px rgba(0,0,0,0.45);
  transform: translateY(-2px);
}

/* Title + body styles from your snippet */
.service-list .views-row .views-field-title .field-content {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--ink);
}

.service-list .views-row .views-field-body .field-content {
  color: var(--ink-dim);
  font-size: .98rem;
  line-height: 1.55;
}

/* If body contains lists, normalize them */
.service-list.views-row .views-field-body ul {
  margin: .25rem 0 0 0;
  padding: 0;
  list-style: none;        /* remove bullets; add your own if desired */
}
.service-list .views-row .views-field-body li + li {
  margin-top: .25rem;
}